如何使用 JavaScript 获取与修改页面字体设置

JavaScript无法读取或修改浏览器全局字体设置，只能通过CSS属性控制网页元素字体样式，如用getComputedStyle()获取、style属性或CSS类修改，并需注意兜底字体和性能优化。

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

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

你实际能操作的是当前页面中元素的字体相关 CSS 属性，比如 font-family、font-size、font-weight 等。这是前端控制视觉呈现的标准方式。

• 用 getComputedStyle() 获取元素当前生效的字体值（只读）
• 用 element.style.xxx 或 element.setAttribute('style', ...) 修改内联样式
• 通过操作 <style> 标签或 CSS 类来批量控制字体

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

注意：返回的是最终计算值（可能被继承、被层叠覆盖），不一定是写在 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，更易维护、支持响应式、利于性能。

立即学习“Java免费学习笔记（深入）”；

• 切换预设字体主题：提前在 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 优化