字体大小记忆实现方法及操作指南

本文详解了如何利用 HTML5 的 localStorage 实现用户字体大小偏好记忆功能，强调存取必须严格配对：用户调整字号时立即用 `setItem` 保存纯数字值，页面加载后在 `DOMContentLoaded` 阶段用 `getItem` 读取并结合 `parseInt` 和安全兜底值（如16）动态设置 `document.documentElement.style.fontSize`；推荐采用 `rem` 单位配合根元素控制实现全局缩放，避免硬编码 CSS 字号，并提醒避开常见陷阱——如未等待 DOM 就读写、混淆 `body` 与 `html` 元素、忽略 Safari 无痕模式兼容性及边界值校验（12–24px 范围限制），真正让字号选择既可靠又平滑地贯穿用户每次访问。

怎么用 localStorage 保存用户选的字号

直接存，别绕弯。用户点按钮改字号，就立刻把数字写进 localStorage，键名统一用 font-size-preference，值存纯数字（比如 16），别存带单位的字符串（"16px"）——后面读出来还要切字符串，多一步就多一个 bug。

常见错误是改完样式不存，或者存了但没在页面加载时读回来。记住：存是写操作，读是读操作，必须配对出现。

• 改字号时调用 localStorage.setItem("font-size-preference", sizeValue)
• 页面 DOMContentLoaded 后立刻读：localStorage.getItem("font-size-preference")
• 读出来是字符串，记得用 parseInt() 转成数字再塞进 style.fontSize
• 如果读不到，设个安全兜底值，比如 16，别让变量是 null 或 undefined

CSS 中该用 rem 还是 px 设置基础字体

用 rem。因为 rem 相对于根元素（html）的 font-size，只要改一次 html 的大小，所有用 rem 的元素字号自动缩放；而满屏写 px 再逐个改，等于给自己造了个定时炸弹。

注意：不要在 CSS 里给 html 写死 font-size: 16px，得留出 JS 控制入口。推荐写法是：

html { font-size: 16px; }
@media (min-width: 768px) { html { font-size: 18px; } }

然后 JS 改字号时只动这一行：document.documentElement.style.fontSize = size + "px"。

• 改 html.style.fontSize 比遍历所有元素改 style.fontSize 快得多
• 别用 document.body.style.fontSize —— body 不是根元素，rem 不认它
• 移动端要注意，iOS Safari 有时会忽略小于 12px 的 html 字号，建议下限设为 12

用户刷新页面后字号变回默认？检查这三处

不是 localStorage 失效，大概率是读取时机或作用域错了。最常踩的坑是：JS 脚本放在 里但没加 defer，或者压根没等 DOM 加载完就读 localStorage，结果 document.documentElement 还没准备好，赋值无效。

• 确保 JS 在 DOMContentLoaded 事件里执行读取逻辑，或脚本标签加 defer
• 确认 localStorage.getItem("font-size-preference") 确实返回了值（可临时加 console.log() 验证）
• 检查是否多个脚本重复设置 html.style.fontSize，后设的覆盖了前设的 —— 尤其是用了 UI 框架或 CMS 主题时

兼容性与边界情况处理

localStorage 在 Safari 无痕模式、某些国产浏览器内核下会直接抛 QuotaExceededError 或静默失败。不能假设它一定可用。

性能上没问题，读写都是同步且极快；但别把它当数据库用 —— 只存一个数字，别顺手塞一堆配置进去。

• 读取前先 try/catch 包裹 localStorage.getItem，捕获 SecurityError 和 QuotaExceededError
• 失败时降级到内存变量（let currentSize = 16），保证功能不崩
• 用户手动清空缓存后，getItem 返回 null，不是报错，别漏判这个分支
• 字号范围建议限制在 12–24，避免用户输个 100 把页面撑爆

实际用起来，最难的不是存和读，而是确保“改字号”这个动作真正触发了 html 元素的样式重算，并且没有被其他 CSS 规则或 JS 覆盖掉。每次调完 document.documentElement.style.fontSize，最好用开发者工具实时看一眼 computed 样式里的 font-size 值有没有变。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~