[英]How to change font-weight for every keypress in javascript
I am new to coding and am working on a code for a variable font, that I created, so that every letter you type changes font weight (and gets heavier).我是编码新手,正在为我创建的可变字体编写代码,以便您键入的每个字母都会改变字体粗细(并且变得更重)。 I already have a code where all letters get heavier at once, and one where font-size changes but I can't figure out how to rewrite that code, so that not the font-size but the font-weight changes.
我已经有一个代码,其中所有字母都会一次变重,一个代码会改变字体大小,但我不知道如何重写该代码,因此不是字体大小而是字体粗细发生了变化。 Thank you in advance for your help!
预先感谢您的帮助!
let initWeight = 101; document.getElementById("testarea").onkeypress = function(event) { myFunction(event.key) }; function myFunction(letter) { initWeight += 50; const letterHTML = '<span style="font-size:' + initWeight + 'px">' + letter + '</span>' document.getElementById("result").innerHTML += letterHTML }
@import { https: //static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2} @font-face { font-family:wf_04476cfbcbfe4a349a33e0080; src: url("https://static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2") format("woff2"); font-weight: 101 900 } div { font-family: 'wf_04476cfbcbfe4a349a33e0080', sans-serif; font-weight: 101; font-size: 100px; }
<div class="myInput" id="testarea" contentEditable="true"> insert text </div> <div id="result" contentEditable="true"></div>
Don't you just mean你不只是想说
'<span style="font-weight:' + initWeight + '">'
let initWeight = 100; document.getElementById("testarea").onkeypress = function(event) { myFunction(event.key) }; function myFunction(letter) { const letterHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>' document.getElementById("result").innerHTML += letterHTML initWeight += 100; }
@import { https: //static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2} @font-face { font-family:wf_04476cfbcbfe4a349a33e0080; src: url("https://static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2") format("woff2"); font-weight: 101 900 } div { font-family: 'wf_04476cfbcbfe4a349a33e0080', sans-serif; font-weight: 101; font-size: 100px; }
<div class="myInput" id="testarea" contentEditable="true"> insert text </div> <div id="result" contentEditable="true"></div>
Try with keyup event.尝试使用 keyup 事件。 maybe it can solve your problem
也许它可以解决你的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.