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切换