Javascript 如何更改文本输入中单独键入的每个字母的字体大小_Javascript_Html_Css_Variables_Fonts

Javascript 如何更改文本输入中单独键入的每个字母的字体大小

javascript html css variables fonts

Javascript 如何更改文本输入中单独键入的每个字母的字体大小,javascript,html,css,variables,fonts,Javascript,Html,Css,Variables,Fonts,我一直在为我创建的一种可变字体编写这段代码，目标是使键入的每个字母的字体重量增加，因此文本慢慢变得越来越不可读。当文本被输入时，是否可以这样做，因为现在它只是奇怪地在输入中添加同一个字母，一个字母是渐进的，另一个字母是正常的？提前感谢您的帮助 <html> <body> <div class="myInput" id="testarea" contentEditable="true"> in

我一直在为我创建的一种可变字体编写这段代码，目标是使键入的每个字母的字体重量增加，因此文本慢慢变得越来越不可读。当文本被输入时，是否可以这样做，因为现在它只是奇怪地在输入中添加同一个字母，一个字母是渐进的，另一个字母是正常的？提前感谢您的帮助

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


插入文本
@进口{
https://static.wixstatic.com/ufonts/5bda5f_2acf8a9fc2d407896ec287713383a8d/woff2/file.woff2}
@字体{
字体系列：wf_2ACF8A9FC2D407896EC287713383A8D；
src:url（“https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2）格式（“woff2”）；
字号：101 900
}
div{
字体系列：“wf_2ACF8A9FC2D407896EC287713383A8D”，无衬线；
字号：101；
字体大小：100px；
}
让初始重量=100；
document.getElementById（“testarea”）.onkeypress=函数（事件）{
myFunction（event.key）
};
函数myFunction（字母）{
innerHTML=“”+字母+“”
document.getElementById（“testarea”）.innerHTML+=innerHTML
初始重量+=10；
}

您刚刚在span style

style=“font-weight:”+initWeight+”；

由于大小没有增加，我在事件侦听器上创建了一个警报，以表明它确实有效。但是视觉差异可能不足以引起眼睛的注意

我用自己的一点创意创建了一个例子，除了字体8，我们还随机调整字体大小，以更吸引眼球


插入文本
@进口{
https://static.wixstatic.com/ufonts/5bda5f_2acf8a9fc2d407896ec287713383a8d/woff2/file.woff2}
@字体{
字体系列：wf_2ACF8A9FC2D407896EC287713383A8D；
src:url（“https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2）格式（“woff2”）；
字号：101 900
}
div{
字体系列：“wf_2ACF8A9FC2D407896EC287713383A8D”，无衬线；
字号：101；
字体大小：100px；
}
让初始重量=100；
document.getElementById（“testarea”）.onkeypress=函数（事件）{
警报（初始重量）；
myFunction（event.key）；
};
函数myFunction（字母）{
innerHTML=“”+字母+“”
document.getElementById（“testarea”）.innerHTML+=innerHTML
初始重量+=10；
}