如何更改使用 javascript 键入的每个字母的字体粗细

Question

我有我制作的这种可变字体，我想在网站上实现它，当用户键入时，每个字母的字体粗细都会增加。 我现在有这个代码，它会随着输入的整个文本而增长，但是那里的一切都在变化，而不是每个字母。 目标是让每个更改的字体权重都增加（所以每个输入的字母）如果有人可以提供帮助，请提前谢谢！

<p id="testarea" contentEditable="true">
Type your text here
</p>

<script>
document.getElementById("testarea").onkeypress = function () { myFunction() }
;
var initWeight = 101
var x = 2;
function myFunction() {
    document.getElementById("testarea").style.fontWeight = initWeight+=50  ;
}
</script>

Answer 1

据我所知，字体权重 go 为 100，因此为 100-200-300 等。我已经改进了您的脚本，它现在应该可以使用正确的字体。

 document.getElementById("testarea").onkeypress = function () { myFunction() }; var initWeight = 100 function myFunction() { initWeight += 100; document.getElementById("testarea").style.fontWeight = initWeight; }

 <p id="testarea" contentEditable="true"> Type your text here </p>