js实现字体
字体设置方法
在JavaScript中设置字体可以通过直接操作DOM元素的style属性或使用CSS类名切换实现。以下是几种常见方法：
修改元素的fontFamily样式
document.getElementById("targetElement").style.fontFamily = "Arial, sans-serif";批量修改多个元素的字体
const elements = document.querySelectorAll(".text-content");
elements.forEach(el => {
el.style.fontFamily = "'Times New Roman', serif";
});动态加载网络字体
使用FontFace API加载自定义字体并应用于页面：
const font = new FontFace('CustomFont', 'url(https://example.com/font.woff2)');
font.load().then(() => {
document.fonts.add(font);
document.body.style.fontFamily = "CustomFont, fallback-font";
});CSS变量控制字体
通过JavaScript动态修改CSS变量实现全局字体切换：
// 设置CSS变量
document.documentElement.style.setProperty('--main-font', 'Georgia');
// CSS中对应使用
/*
:root {
--main-font: sans-serif;
}
body {
font-family: var(--main-font);
}
*/字体大小调整示例
实现字体大小的增减控制：
let currentSize = 16;
function changeFontSize(change) {
currentSize += change;
document.body.style.fontSize = `${currentSize}px`;
}注意事项
- 字体名称包含空格时需用引号包裹（如
'Times New Roman'） - 始终指定备用字体（如
sans-serif/serif通用族名称） - 网络字体需考虑加载完成状态，可使用
font.ready事件 - 性能敏感场景避免频繁操作样式，优先使用class切换
