网页无法自动安装字体，只能提供下载链接供用户双击手动安装；需用download属性强制下载，并确保mime类型正确；安装效果因系统而异，且无法通过代码可靠检测是否已安装。
怎么让网页字体支持离线安装（比如双击安装 .ttf）
HTML 本身不能触发系统级字体安装——浏览器出于安全限制，font-face 加载的字体只在当前页面生效，不会写入系统字体库。所谓“下载字体包”只是提供一个 .ttf 或 .otf 文件供用户手动保存后双击安装。
常见错误现象：@#@#@#@#@#@#@#@#@#@0 在 Chrome/Firefox 点击后直接预览或下载失败；Safari 可能弹出预览窗口但不提示“双击安装”；用户误以为点了就装上了。
- 必须用
download属性强制触发下载：@#@#@#@#@#@#@#@#@#@1 - 确保服务器返回的 MIME 类型是
font/ttf或application/octet-stream，否则 Chrome 可能拒绝下载（尤其本地file://协议下） - 不要指望
@font-face的src: url(...)路径能被用户直接双击——那是相对路径，不是可下载的完整文件地址
如何让 .ttf 下载后真正被系统识别（Windows/macOS 差异）
下载只是第一步，用户是否能顺利安装，取决于操作系统行为和文件完整性。
使用场景：设计师发给客户看稿时附带品牌字体，客户需先安装才能正确显示 Word/PDF/PSD。
- Windows 用户双击
.ttf→ 点“安装”按钮 → 字体进C:\Windows\Fonts，立即生效 - macOS 用户双击 → 字体册（Font Book）打开 → 必须点“安装字体”（不是“预览”）→ 否则只临时加载，重启后失效
- 注意：Mac 上若字体已存在同名字体，安装会失败且无明确提示；建议在文件名里加版本号，如
BrandSans-v2.1.ttf
为什么 font-face 加载正常，但用户还是看不到字体？
这不是代码问题，而是认知错位：开发者以为“网页用了这个字体”，用户就“系统有了这个字体”。其实两者完全隔离。
性能 / 兼容性影响：即使你把 @font-face 配得再全（woff2/woff/ttf），也只影响当前网页渲染；它对用户本地其他软件（Word、Sketch、Figma）零作用。
- 用户截图发给别人，对方没装该字体 → 显示默认字体（如 Times New Roman）
- 导出 PDF 时若未嵌入字体，且目标设备无该字体 → 替换为相似字体，字形/行高可能突变
- 解决思路不是“让网页教系统装字体”，而是明确告知用户：“请先下载并双击安装
BrandFont.ttf，再打开文档”
有没有办法自动检测用户是否已安装某字体？
不能可靠检测。CSS 的 @font-face 不暴露安装状态；JavaScript 也没有 API 查询系统字体列表（隐私限制）。
常见错误现象：有人用 document.fonts.check('14px "MyFont"') 判断，但这只检查当前页面是否成功加载了该字体，不是系统是否安装。
-
document.fonts.check()返回true，只代表@font-face加载完成且浏览器能渲染，并不代表系统字体库里有它 - 想绕过？别试。伪造字体检测（比如画文字测宽）误差大、兼容差、移动端基本失效
- 最务实做法：在下载链接旁加一行小字说明，“安装后需重启 Word / Photoshop 才能使用”
字体不是代码依赖，没法 npm install；它卡在人和系统的交接处——那里没有 API，只有双击和确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
