如何更改javascript中每个按键的字体粗细

Question

我是编码新手，正在为我创建的可变字体编写代码，这样您输入的每个字母都会改变字体粗细（并且变得更重）。我已经有一个代码，其中所有字母一次变重，一个字体大小发生变化，但我不知道如何重写该代码，所以不是字体大小而是字体粗细发生变化。 提前感谢您的帮助！

let initWeight = 101;

document.getElementById("testarea").onkeypress = function(event) {
  myFunction(event.key)
};

function myFunction(letter) {
  initWeight += 50;
  const letterHTML = '<span style="font-size:' + initWeight + 'px">' + letter + '</span>'
  document.getElementById("result").innerHTML += letterHTML
}

  @import {
  https: //static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2}
  @font-face {
    font-family:wf_04476cfbcbfe4a349a33e0080;
    src: url("https://static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2") format("woff2");
    font-weight: 101 900
  }
  div {
    font-family: 'wf_04476cfbcbfe4a349a33e0080', sans-serif;
    font-weight: 101;
    font-size: 100px;
  }

<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<div id="result" contentEditable="true"></div>

Answer 1

你的意思是不是

'<span style="font-weight:' + initWeight + '">'

let initWeight = 100;

document.getElementById("testarea").onkeypress = function(event) {
  myFunction(event.key)
};

function myFunction(letter) {
  const letterHTML = '<span style="font-weight:' + initWeight + '">' + letter + '</span>'
  document.getElementById("result").innerHTML += letterHTML
  initWeight += 100;
}

  @import {
  https: //static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2}
  @font-face {
    font-family:wf_04476cfbcbfe4a349a33e0080;
    src: url("https://static.wixstatic.com/ufonts/5bda5f_04476cfbcbfe4a349a33e0080a539b44/woff2/file.woff2") format("woff2");
    font-weight: 101 900
  }
  div {
    font-family: 'wf_04476cfbcbfe4a349a33e0080', sans-serif;
    font-weight: 101;
    font-size: 100px;
  }

<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<div id="result" contentEditable="true"></div>

Answer 2

尝试使用 keyup 事件。也许它可以解决你的问题