iPad Safari 不加载 @font-face 字体的主因是 format() 描述符缺失或错误（须明确写 'woff2' 或 'truetype'）及服务端 MIME 类型不正确（WOFF2 必须为 font/woff2，TTF 为 font/ttf），二者叠加导致静默失效。
iPad Safari 不加载 @font-face 自定义字体的典型表现
页面在其他浏览器（Chrome、Edge、Firefox）中字体正常，但在 iPad Safari 上回退为系统默认字体（如 San Francisco），且控制台无报错。这不是字体文件损坏或路径错误，而是 iOS Safari 对 @font-face 的加载策略限制：它会静默跳过不满足 MIME 类型、跨域或格式兼容性要求的字体声明。
@font-face 在 iPad 上必须声明 format('woff2') 或 format('truetype')
iPad Safari（尤其是 iOS 15+）对 format() 描述符敏感。若只写 format('woff') 或完全省略，即使 WOFF 文件本身可被下载，字体也不会被激活使用。
- ✅ 推荐写法（兼容性最强）：
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } - ❌ 高风险写法：
src: url('myfont.woff') format('woff')—— iOS 15.4+ 已观察到大量失效案例 - ⚠️ 注意：
format('opentype')和format('embedded-opentype')在现代 iOS Safari 中基本无效，不要依赖
iPad 无法加载字体的常见服务端配置陷阱
即使 CSS 写对了，字体仍不显示，大概率是服务器未正确返回字体文件的 MIME 类型，或响应头触发了 Safari 的安全拦截。
- WOFF2 文件必须返回
content-type: font/woff2；TTFF 文件必须返回content-type: font/ttf（不是application/octet-stream或application/font-sfnt） - 确保响应头不含
X-Content-Type-Options: nosniff—— 它会让 Safari 拒绝将非标准 MIME 类型“纠错”为字体类型 - 如果字体放在 CDN 或 Nginx 上，检查是否启用了
add_header Access-Control-Allow-Origin "*"（跨域字体必须带 CORS 头，否则 iOS Safari 直接丢弃）
iPad 字体 fallback 与检测缺失的务实补救
不能完全依赖 @font-face 在 iPad 上 100% 生效，需有降级方案和运行时确认机制。
立即学习“前端免费学习笔记（深入）”；
- 在
font-family声明中保留系统字体栈：font-family: 'MyFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - 用 JavaScript 简单检测是否生效：
const testEl = document.createElement('span'); testEl.style.fontFamily = "'MyFont', sans-serif"; testEl.textContent = 'i'; document.body.appendChild(testEl); const computed = getComputedStyle(testEl).fontFamily; // 若 computed 包含 'MyFont'，说明加载成功；否则 fallback document.body.removeChild(testEl); - 避免在
font-display: swap下做关键文字动画 —— iPad 上字体可能长时间处于 invisible 状态，导致布局抖动或内容不可见
format() 声明不完整 + 服务端 MIME 类型错误，两者同时存在时几乎必然失败。 
