如何解决如何在JavaScript中为每个按键更改字体粗细
我是编码的新手,正在为我创建的可变字体编写代码,这样您键入的每个字母都会改变字体的粗细(并且变得更重)。我已经有一个代码,其中所有字母一次变重,一个字体大小改变,但我不知道如何重写该代码,因此字体大小而不是字体大小会改变。 预先感谢您的帮助!
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>
解决方法
你不是故意的意思
'<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>
,
尝试使用keyup事件。也许可以解决您的问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。