使用Javascript在用户输入时修改字体系列

Question

我希望我的文本区域在用户键入时呈现另一种字体(除了monospace(。我的目标是使用Javascript来实现这一点。

下面是一个将用户输入更改为大写(实时(的脚本。然而，我一直无法通过使用以下脚本作为模板找到解决问题的方法。

<div id="thoughts-textarea">
<label for="thoughts">Additional thoughts?</label><br>
<textarea name="thoughts" id="thoughts" cols="30" rows="5" 
placeholder="Enter any comments here..."></textarea>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
let thoughts = document.getElementById("thoughts");
thoughts.addEventListener('input', fontFam);
});
function fontFam(ev){
let num = ev.charCode;
let letter = String.fromCharCode(num);
console.log(ev.type, num, letter, ev.target.value);
ev.target.value = ev.target.value.toUpperCase();
}
</script>

例如，我试过在中拼接

function fontFam(ev){
let num = ev.charCode;
let letter = String.fromCharCode(num);
console.log(ev.type, num, letter, ev.target.style);
ev.target.style = ev.target.style.fontFamily = "Nunito, sans-serif";
}
function fontFam(ev){
let num = ev.charCode;
let letter = String.fromCharCode(num);
console.log(ev.type, num, letter, ev.target.style);
ev.target.style = ev.target.style.font = "Nunito, sans-serif";
}
function fontFam(ev){
let num = ev.charCode;
let letter = String.fromCharCode(num);
console.log(ev.type, num, letter, ev.target.value.style);
ev.target.value.style = ev.target.value.style.font = "Nunito, sans-serif";
}

以及多种其他变体，但仍然无法找到有效的解决方案。

感谢您的时间和精力，

马利克

这是我的第二篇文章。抱歉，如果我还没有学习正确的程序(对于javascript&SO帖子(

Answer 1

您非常接近，请参阅下面我更新的片段：

document.addEventListener('DOMContentLoaded', function(){
let thoughts = document.getElementById("thoughts");
thoughts.addEventListener('input', fontFam);
});
function fontFam(ev){
let num = ev.charCode;
let letter = String.fromCharCode(num);
console.log(ev.type, num, letter, ev.target.value);
ev.target.style.fontFamily = "Impact,Charcoal,sans-serif";
}

<div id="thoughts-textarea">
<label for="thoughts">Additional thoughts?</label><br>
<textarea name="thoughts" id="thoughts" cols="30" rows="5" placeholder="Enter any comments here..."></textarea>
</div>

我在示例中使用了impact字体系列，但对于您的代码，我只需调整：

ev.target.value.style = ev.target.value.style.font = "Nunito, sans-serif";

收件人：

ev.target.value.style.font = "Nunito, sans-serif";

Answer 2

您需要创建一个FontFace并将FontFamily应用于主体您还需要创建一个函数，每当用户单击按钮更改字体时，该函数就会被执行。例如changeFont(fontName)

async function changeFont(fontName, fontUrl, options={}) {
const ff = new FontFace(fontName, `url(${fontUrl})`, options);
try {
const loadedFont = await ff.load()
document.fonts.add(loadedFont)
document.body.style.fontFamily = fontName
} catch (err) {
console.error(err)
}
}

然后你可以使用这个功能，例如

await changeFont('Junction Regular', 'fonts/junction-regular.woff', { style:'normal', weight: 700' })