如何更改使用 javascript 鍵入的每個字母的字體粗細

Question

我有我制作的這種可變字體，我想在網站上實現它，當用戶鍵入時，每個字母的字體粗細都會增加。 我現在有這個代碼，它會隨着輸入的整個文本而增長，但是那里的一切都在變化，而不是每個字母。 目標是讓每個更改的字體權重都增加（所以每個輸入的字母）如果有人可以提供幫助，請提前謝謝！

<p id="testarea" contentEditable="true">
Type your text here
</p>

<script>
document.getElementById("testarea").onkeypress = function () { myFunction() }
;
var initWeight = 101
var x = 2;
function myFunction() {
    document.getElementById("testarea").style.fontWeight = initWeight+=50  ;
}
</script>

Answer 1

據我所知，字體權重 go 為 100，因此為 100-200-300 等。我已經改進了您的腳本，它現在應該可以使用正確的字體。

 document.getElementById("testarea").onkeypress = function () { myFunction() }; var initWeight = 100 function myFunction() { initWeight += 100; document.getElementById("testarea").style.fontWeight = initWeight; }

 <p id="testarea" contentEditable="true"> Type your text here </p>