如何更改使用javascript键入的每个字母的字体大小

我有这个我制作的可变字体，我想在一个网站上实现它，当用户输入时，每个字母的字体重量都会增加。我现在有一段代码，它随着键入的整个文本的增长而增长，但所有内容都会发生变化，而不是每个字母（因此，我需要代码来做的是，对于每个按键事件，字体大小都会改变，但不会改变整个文本，因此键入的第一个字母的字体大小会更小，并保持不变，但以下字母的字体大小会增加）

请在此处键入您的文字

不确定
document.getElementById（“testarea”）.onkeypress=function（）{
myFunction（）}
document.getElementById（“testarea”）.addEventListener（“输入”，myFunction）；
var-initWeight=101；
函数myFunction（）{
document.getElementById（“testarea”）.style.fontWeight=initWeight++；
}
函数myFunction2（）{
document.getElementById（“testarea”）.style.fontwweight=“101”；
}
函数myFunction2（）{
document.getElementById（“testarea”）.style.fontwweight=“101”；
}

您需要将每个字母放在一个单独的标签中，例如

标签，这样您就可以分别定位每个字母。您的输出结果将如下所示

<p><span class="bolder">h</span><span class="bold">e</span>llo</p>

你好

---

你能分享一个前后的可视表示吗？我很难理解预期的功能应该是什么。此外，你定义了两次

myFunction2

，从未使用过，并且

myFunction

使用过两次，对吗

<p><span class="bolder">h</span><span class="bold">e</span>llo</p>