用 JavaScript 控制页面字体：从入门到避坑
在交互页面上，如何让字体“动”起来？比如点击按钮后字体颜色瞬间切换、滚动时标题悄然放大、或者一键切换“夜间模式”下的字重与字色……这些动态效果的幕后功臣，正是 JavaScript 对页面字体样式的精准操控。
一句话说透原理：核心就是操作 DOM 元素的 style 对象，或者切换预设的 CSS 类名。它不会改动你的 CSS 文件，而是实时影响元素的内联样式——响应迅速、灵活性强，特别适合交互驱动的视觉变化场景。
直接修改 style 属性（适合单点、即时调整）
这是最直观的方式。什么时候需要直接操作 style？比如按钮点击变色、滚动时缩放文字、表单校验标红提示……一句话总结：适合“冲着这一个元素去，改完就生效”的即时需求。
但有几个小细节要注意：CSS 属性名需要转为驼峰式（font-size 变为 fontSize），数值必须带单位——只有 0 是个例外。
- 修改字体类型：
element.style.fontFamily = "Helvetica, sans-serif" - 调整字体大小：
element.style.fontSize = "1.25rem"（px、em、rem、% 都支持） - 更换字体颜色：
element.style.color = "#333"或"rgb(51, 51, 51)" - 加粗/斜体/下划线：
element.style.fontWeight = "bold"，element.style.fontStyle = "italic"，element.style.textDecoration = "underline" - 批量设置更简洁：
Object.assign(element.style, { fontSize: "18px", color: "#2c3e50", fontWeight: "600" })
用 classList 切换 CSS 类（日常开发更推荐）
相比直接写死内联样式值，把字体样式提前封装成 CSS 类，JS 只负责开关类名——这显然是更优雅的做法。好处非常明显：样式可复用、支持 CSS 过渡动画、方便切换明暗主题，代码也更容易维护。
- 定义 CSS 类：
.title-large { font-size: 2rem; font-weight: 700; } - 添加类：
element.classList.add("title-large") - 移除类：
element.classList.remove("title-small") - 切换状态（比如点击展开/收起）：
element.classList.toggle("highlighted", isActive) - 检查当前状态：
element.classList.contains("serif-mode")
换句话说，用 classList 这种“开关式”做法，比手写一堆 style.xxx = yyy 要健壮得多，也更符合“表现与逻辑分离”的工程化思维。
响应式字体：随滚动或视口动态调整
让字体大小根据用户行为或设备环境自适应，能显著提升可读性与用户体验。这里有几个常见玩法：
- 随滚动放大标题：
document.addEventListener("scroll", () => { title.style.fontSize = Math.max(24, 24 + window.scrollY / 10) + "px"; }); - 按屏幕宽度分级：
if (window.innerWidth < 768) { element.style.fontSize = "14px"; } - 别忘了监听窗口重置：
window.addEventListener("resize", updateFontSize);防止横竖屏切换后样式失效
注意事项与避坑提醒
看起来简单的操作，其实有相当多的细节值得留意：
- style 只读取和设置内联样式——它拿不到 CSS 文件中定义的默认值。想获取计算后的实际值，得用
getComputedStyle(element).fontSize。 - font-size 设为 0 不需要单位，但设为 0.5 或 12 就必须写
"0.5rem"或"12px"，这一点经常被忽略。 - 避免用 innerHTML 拼 style 标签——既不安全也不易维护；也别手动拼接
className字符串，容易覆盖之前的类。 - 大量元素统一改字体？ 优先用
document.body.classList.add("theme-serif")配合全局 CSS 规则，比遍历每个元素高效得多，也便于后续维护。
