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

作者：袖梨 2026-07-13

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')