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

【问题标题】：How to change font-weight for every letter typed using javascript如何更改使用 javascript 键入的每个字母的字体粗细
【发布时间】：2020-11-05 10:30:03
【问题描述】：

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


<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>

【问题讨论】：

标签： javascript function fonts onchange

【解决方案1】：

据我所知，字体粗细是 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>

【讨论】：

该问题表明正在使用可变字体。如果字体作为可变权重轴，那么权重可以是字体支持的权重范围内的任何整数或小数值。
我想你是对的，在这种情况下，他可以在我的函数中更改添加到“initWeight”的值以满足他的需要。