safari字体加载失败主因是@font-face声明不合规：必须补全format()、font-weight与font-style成对声明、font-family严格匹配、mime类型正确，否则静默跳过。
根本原因不是字体文件坏了，而是 Safari 对 @font-face 的解析和加载校验比其他浏览器更严格——漏一个 format()、错一个引号、少一个 font-style，它就直接跳过整条规则。
检查 @font-face 是否被 Safari 静默丢弃
老版本 Safari（≤10）或写法不规范时，整条 @font-face 规则会被忽略，连 fallback 字体都不会用。常见触发点：
-
format("woff2")用了中文引号（“woff2”）或漏写format()—— Safari 10 直接跳过 -
src中混用url()和local()，但local()没放在最前 —— 旧 Safari 要求必须 local 优先 -
font-weight: 300 700这类可变字体语法 —— Safari 10 不认识，整块声明作废 - 声明了
font-display: swap但没配crossorigin属性（尤其跨域字体）—— Safari 10 请求 403，加载失败
验证字体请求是否真返回了 200
打开 Safari 开发者工具（Command + Option + I），切到 Network → 筛选 Fonts，刷新页面。重点看：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 状态码是不是
200：出现404是路径错，0或blocked多是扩展拦截或混合内容（HTTP 页面加载 HTTPS 字体） - Response Headers 中
Content-Type是不是font/woff2（不是application/font-woff2或text/plain） - 点击字体请求 → Preview 标签页是否为空白：空白说明文件损坏、格式不被支持，或服务器压根没返回二进制数据
确认 font-family 匹配与回退链是否断裂
Safari 对 font-family 字符串匹配极其敏感，大小写、空格、引号缺一不可：
- CSS 中
@font-face声明的是font-family: "Inter"，但元素上写font-family: Inter（没引号）或"inter"（小写）→ 匹配失败，回退到系统字体 - 只提供
.woff2格式，没配.woff或.ttf→ Safari ≤10、iOS ≤10.3 直接放弃加载 -
font-weight和font-style没成对声明：比如用了 Medium 字重的文件，但@font-face只写了font-weight: 500，没写font-style: normal→ 后续font: 500 16px "Inter"会因匹配失败而回退
排除本地字体与扩展干扰
macOS 系统字体册里若装了同名桌面字体（如 “Inter” 或 “FontAwesome”），Safari 可能优先调用本地版本，导致图标乱码或样式异常：
- 打开 macOS “字体册” App，搜索字体名，停用所有同名已启用字体
- 用无痕窗口（
Shift + Command + N）测试：如果无痕下正常，问题大概率出在扩展（尤其是 Dark Reader、uBlock Origin、Stylus） - 进 Safari → 偏好设置 → 扩展 → 全部关闭 → 退出 Safari 再重开，逐个启用排查
最容易被忽略的其实是 font-style 和 font-weight 的成对声明，以及 format() 描述符的强制存在——Safari 不像 Chrome 那样宽容，它要么全匹配，要么全跳过，中间没有妥协空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
