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 的修改仅作用于页面渲染层,对系统级设置完全没有影响。这一点在设计“字体设置”功能时一定要明确边界,避免让用户产生误解。
