如何更改在文本輸入中單獨鍵入的每個字母的字體粗細

Question

我一直在為我創建的可變字體編寫此代碼，目標是輸入的每個字母都會增加字體粗細，因此文本會慢慢變得越來越不可讀。 是否有可能在輸入文本時這樣做，因為現在它只是奇怪地在輸入中添加了相同的字母，它會逐步完成它應該做的事情，而另一個只是正常的？ 預先感謝您的任何幫助！

<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

你幾乎在正確的軌道上只是添加了分號 ins span style style="font-weight:'+initWeight+';
至於大小沒有增加，我在事件偵聽器上創建了一個警報，只是為了表明它確實有效。 然而，視覺差異可能不足以讓眼睛注意到。

我用自己的創造力創建了一個示例，除了 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>

最后一個例子

 <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