How to change font-weight for each letter typed individually in a text input
Question
I have been working on this code for a variable font I created, where the goal would be that each letter that is typed increases in font-weight so the text slowly gets more and more unreadable. Is it possible to do that while the text is being typed, because right now it just weirdly adds the same letter in the input one where it does what it should progressively, and the other just normally? Thank you in advance for any help!
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<style>
@import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
@font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key)
};
function myFunction(letter) {
innerHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>'
document.getElementById("testarea").innerHTML += innerHTML
initWeight += 10;
}
</script>
</body>
</html>
1 answers
solution1
1 2020-12-05 13:32:05
You are almost on the right track just just added semi colons ins span style style="font-weight:'+initWeight+';
As far as the size not increasing I created a alert on event listener just to show that it does indeed work. However visual differential may not be enought for the eye to notice.
I have created an example with my own bit of creativity where besides font-eight we are randomising font-size to trick the eye a bit more.
<html> <body> <div class="myInput" id="testarea" contentEditable="true"> insert text </div> <style> @import { https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2} @font-face { font-family:wf_2acfb8a9fc2d407896ec287713383a8d; src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2"); font-weight: 101 900 } div { font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif; font-weight: 101; font-size: 100px; } </style> <script> let initWeight = 100; document.getElementById("testarea").onkeypress = function(event) { alert(initWeight); myFunction(event.key); }; function myFunction(letter) { innerHTML = '<span style="font-weight:'+initWeight+';">' + letter + '</span>' document.getElementById("testarea").innerHTML += innerHTML initWeight += 10; } </script> </body> </html>
FINAL EXAMPLE
<html> <body> <div class="myInput" id="testarea" contentEditable="true"> insert text </div> <div class="myInput" id="showarea"></div> <style> @import { https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2} @font-face { font-family:wf_2acfb8a9fc2d407896ec287713383a8d; src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2"); font-weight: 101 900 } div { font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif; font-weight: 101; font-size: 100px; } </style> <script> let initWeight = 100; document.getElementById("testarea").onkeypress = function(event) { myFunction(event.key); }; function myFunction(letter) { let size = Math.floor(Math.random() * (100 - 50)) + 15; innerHTML = '<span style="font-weight:'+initWeight+'; font-Size:' +size+ 'pt;">' + letter + '</span>' document.getElementById("showarea").innerHTML += innerHTML; initWeight += 10; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.