JavaScript获取与修改页面字体设置

JavaScript 无法直接读取或修改用户浏览器的全局字体设置，例如系统默认字体、浏览器“设置→外观→自定义字体”中的配置。这些属于隐私敏感的底层偏好，现代浏览器出于安全与隐私考虑，早已禁止 JavaScript 染指。

实际可操作的范围，是当前页面中元素的字体相关 CSS 属性——font-family、font-size、font-weight 等。这是前端控制视觉呈现的标准方式，也是日常工作中真正需要关注的领域。

能获取和修改的是网页自身的字体样式

理解这个边界至关重要：只能操作页面内元素，无法影响用户的系统偏好。具体手段主要有三类：

• 使用 getComputedStyle() 获取元素当前生效的字体值（只读），返回的是最终计算值，而非原始声明值；
• 使用 element.style.xxx 或 element.setAttribute('style', ...) 修改内联样式，适合单次、临时调整；
• 通过操作 标签或 CSS 类批量控制字体，这是最推荐的做法，维护成本低，且有利于响应式设计。

获取某个元素的实际字体族

需要注意：getComputedStyle() 返回的是最终计算值，可能被继承、被层叠覆盖，不一定等于 HTML 或 CSS 中的原始声明。来看一个示例：

const el = document.querySelector('h1');
const computed = getComputedStyle(el);
console.log(computed.fontFamily); // 如 "Helvetica, Arial, sans-serif"
console.log(computed.fontSize);   // 如 "24px"
console.log(computed.fontWeight); // 如 "700" 或 "bold"

获取这些值后，可以对比预期、进行校验，或作为后续动态修改的基准。

动态修改字体设置的常用方法

实际操作中，优先推荐使用 CSS 类切换，而非硬编码 style 属性。原因很简单：类切换更易于维护、支持响应式，且对性能更友好。具体应用场景如下：

• 切换预设字体主题：提前在 CSS 中定义好类，例如 .font-serif、.font-mono，然后通过 element.classList.toggle() 一键切换，简洁高效；
• 实时调整字号：绑定一个 range input，读取 value 后直接设置 document.body.style.fontSize = value + 'px'——注意必须带上单位，否则浏览器无法识别；
• 替换全局字体栈：更优雅的方式是修改 :root 的自定义属性，让 CSS 变量驱动全局字体。例如 document.documentElement.style.setProperty('--base-font', '"Inter", sans-serif')，所有引用该变量的元素都会自动更新。

限制与注意事项

尽管 JavaScript 能修改页面字体，但某些操作确实无法实现。例如：

• 无法获取用户在浏览器设置中选定的“最小字体大小”或“允许页面选择自己的字体”开关状态——这些属于系统级隐私权限，不会暴露给网页；
• 修改 font-family 时，务必提供通用字体族兜底（如 sans-serif），否则用户设备上若缺少指定字体，排版可能直接崩溃；
• 频繁修改样式可能触发重排重绘，若需对大量元素调整字体，建议使用 requestAnimationFrame 进行批处理，或合并操作以避免反复触发渲染。

此外值得注意的是：某些字体设置可能被用户样式表或浏览器强制策略覆盖（例如阅读模式中强制使用等宽字体），JavaScript 的修改仅作用于页面渲染层，对系统级设置完全没有影响。在设计“字体设置”功能时，务必明确这一边界，避免用户产生误解。