localstorage不能存储字体文件，仅适合保存字体路径、激活族、语言子集哈希等轻量元数据；真正加载依赖@font-face和css，其作用是记录用户偏好并辅助动态注入样式，而非替代浏览器原生字体缓存机制。
LocalStorage 不能直接存储字体文件，也不适合存字体二进制内容或 Base64 编码后的字体数据。它只适合存轻量、结构化的配置信息，比如字体加载路径、启用状态、语言偏好等元数据。真正加载字体靠的是 @font-face 和 CSS，而 LocalStorage 的作用是“记住用户选了哪套路径、要不要用某个字体、该加载哪个子集”。
该存哪些字体路径相关配置
重点存可变、可切换的路径决策项，不是字体本身：
-
字体名称与对应路径映射：例如
{"roboto": "/fonts/roboto-v32-latin.woff2", "noto-sans-sc": "/fonts/noto-sans-sc-subset-zh.woff2"} -
当前激活的字体族：如
"activeFontFamily": "noto-sans-sc"，用于控制页面主字体切换 -
路径是否启用 CDN 或本地：如
"fontSource": "cdn"或"local"，配合构建时生成不同 base URL -
多语言子集路径标识：如
"zh-subset-hash": "e8f1a7"，服务端据此返回精准字形，前端拼接完整 URL（/fonts/noto-zh-v2?h=e8f1a7） -
自定义上传字体的 Blob URL 标记：用户上传 .ttf 后，JS 创建
URL.createObjectURL(file)，只把该 URL 字符串存入 LocalStorage（注意：页面刷新后失效，需搭配文件重载逻辑）
安全可靠的读写方式
用 JSON 序列化 + 异常兜底，避免解析失败导致字体逻辑中断：
- 保存配置：
localStorage.setItem('fontConfig', JSON.stringify(config)) - 读取并容错：
const config = JSON.parse(localStorage.getItem('fontConfig') || '{}') - 若字段缺失，提供默认值：
config.activeFontFamily = config.activeFontFamily || 'system-ui' - 不手动修改 localStorage 中的值，防止 JSON 格式损坏；所有变更走 JS 控制逻辑
如何把配置真正用起来
LocalStorage 只是“记”，不自动生效。需要主动读取并注入样式：
- 页面初始化时读取配置，动态生成
@font-face规则并插入<style></style>标签 - 根据
activeFontFamily设置根元素或 body 的font-family - 调用
document.fonts.load()检测字体就绪，再移除加载态 class 或触发重排 - 监听用户在设置页的切换操作，更新 LocalStorage 后立即重建 @font-face 并刷新样式
不该做的几件事
避开常见误区，保持轻量与稳定：
- 不把 .woff2 文件转成 Base64 存进去——体积膨胀、解析慢、易超限
- 不依赖 LocalStorage 做字体缓存——浏览器已有 HTTP Cache 和 Font Cache，更高效
- 不存绝对路径中的敏感信息（如内网 IP、测试域名），避免跨环境误用
- 不在隐私模式下强依赖——部分浏览器禁用 LocalStorage，应有降级方案（如用内存对象暂存）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
