Safari加载MyriadArabic-Regular.woff2字体报404错误，求解决方法

针对你遇到的Safari加载Myriad Arabic及其他字体返回404的问题，按以下步骤排查修复：

1. 核对文件路径与实际存储情况 #

• 相对路径验证：确认CSS文件所在目录的上级文件夹中，是否存在fonts目录，且目标字体文件（如MyriadArabic-Regular.woff2）确实在该目录下。可以将CSS中的相对路径替换为绝对路径（如/fonts/MyriadArabic-Regular.woff2）测试，验证路径是否正确。
• 文件名大小写检查：Safari对文件名大小写严格敏感，确保CSS中引用的文件名与服务器上的实际文件名完全一致（包括大小写），比如MyriadArabic-Regular.woff2和myriadarabic-regular.woff2会被视为不同文件。
• 直接访问验证：在浏览器地址栏输入字体文件的完整URL（例如https://你的域名/fonts/MyriadArabic-Regular.woff2），如果无法下载，说明服务器上文件缺失或路径错误。

2. 检查服务器配置 #

• MIME类型配置：确保服务器已正确设置字体文件的MIME类型，否则可能被浏览器或服务器拒绝：
  • woff2: font/woff2
  • woff: font/woff
  • otf: font/otf
  • ttf: font/ttf
    以Nginx为例，可在配置文件中添加：

  types {
      font/woff2 woff2;
      font/woff woff;
      font/otf otf;
      font/ttf ttf;
  }
  

• 跨域权限设置：如果字体文件与页面不在同一域名，需在服务器配置CORS响应头（如Access-Control-Allow-Origin: *），Safari对跨域字体的加载限制较严格。
• 文件权限检查：确保服务器上的字体文件权限允许Web进程读取（通常设置为644），权限不足可能导致403或伪装成404的错误。

3. 修正CSS代码细节 #

• 格式值修正：otf对应的format值应为opentype，Safari可能严格要求标准格式值，修正后的代码：

  @font-face {
      font-family: 'Myriad Arabic';
      src: url('../fonts/MyriadArabic-Regular.woff2') format('woff2'),
           url('../fonts/MyriadArabic-Regular.woff') format('woff'),
           url('../fonts/MyriadArabic-Regular.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
  }
  

• 精简字体格式：Safari 18.1完全支持woff2格式，可只保留woff2引用减少请求，同时确认字体文件是标准的woff2格式，避免文件损坏。

4. 缓存与浏览器测试 #

• 强制刷新缓存：使用Cmd+Shift+R强制刷新Safari页面，清除旧缓存后重试，避免缓存导致的路径解析错误。
• 跨浏览器对比：在Chrome、Firefox中测试是否出现同样问题，如果仅Safari报错，重点排查Safari特有的限制（大小写、格式值、跨域规则）；若所有浏览器都报错，则问题集中在路径或服务器配置。

内容的提问来源于stack exchange，提问作者Ole Me