如何更改在文本输入中单独键入的每个字母的字体粗细

Question

I have been working on this code for a variable font I created, where the goal would be that each letter that is typed increases in font-weight so the text slowly gets more and more unreadable.我一直在为我创建的可变字体编写此代码，目标是输入的每个字母都会增加字体粗细，因此文本会慢慢变得越来越不可读。 Is it possible to do that while the text is being typed, because right now it just weirdly adds the same letter in the input one where it does what it should progressively, and the other just normally?是否有可能在输入文本时这样做，因为现在它只是奇怪地在输入中添加了相同的字母，它会逐步完成它应该做的事情，而另一个只是正常的？ Thank you in advance for any help!预先感谢您的任何帮助！

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

Answer 1

You are almost on the right track just just added semi colons ins span style style="font-weight:'+initWeight+';你几乎在正确的轨道上只是添加了分号 ins span style style="font-weight:'+initWeight+';
As far as the size not increasing I created a alert on event listener just to show that it does indeed work.至于大小没有增加，我在事件侦听器上创建了一个警报，只是为了表明它确实有效。 However visual differential may not be enought for the eye to notice.然而，视觉差异可能不足以让眼睛注意到。

I have created an example with my own bit of creativity where besides font-eight we are randomising font-size to trick the eye a bit more.我用自己的创造力创建了一个示例，除了 font-8 之外，我们还随机化了 font-size 来欺骗眼睛。

 <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) { alert(initWeight); myFunction(event.key); }; function myFunction(letter) { innerHTML = '<span style="font-weight:'+initWeight+';">' + letter + '</span>' document.getElementById("testarea").innerHTML += innerHTML initWeight += 10; } </script> </body> </html>

FINAL EXAMPLE最后一个例子

 <html> <body> <div class="myInput" id="testarea" contentEditable="true"> insert text </div> <div class="myInput" id="showarea"></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) { let size = Math.floor(Math.random() * (100 - 50)) + 15; innerHTML = '<span style="font-weight:'+initWeight+'; font-Size:' +size+ 'pt;">' + letter + '</span>' document.getElementById("showarea").innerHTML += innerHTML; initWeight += 10; } </script> </body> </html>

如何更改在文本输入中单独键入的每个字母的字体粗细

问题描述

1 个解决方案

解决方案1
1 2020-12-05 13:32:05

如何更改在文本输入中单独键入的每个字母的字体粗细

问题描述

1 个解决方案

解决方案1 1 2020-12-05 13:32:05

解决方案1
1 2020-12-05 13:32:05