@font-face移动端失效求助：iPhone 6s+及三星GalaxyS8+无法加载字体

针对你遇到的Mac端显示正常、但iPhone 6s+和Samsung Galaxy S8+等移动端字体不生效的问题，我整理了几个常见的排查和修复方向，你可以逐一尝试：

• 确保字体格式覆盖所有移动端兼容场景
  不同移动端系统和浏览器对字体格式的支持有差异：iOS老版本（比如iPhone 6s+可能运行的iOS 12及以下）对woff2的支持有限，部分安卓设备也需要兜底的ttf格式。建议在@font-face中同时声明多种格式，优先级从高到低（woff2体积最小加载最快）：

  @font-face {
    font-family: 'YourCustomFont';
    src: url('your-font.woff2') format('woff2'),
         url('your-font.woff') format('woff'),
         url('your-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 可选：添加字体显示策略，避免无样式文本闪烁 */
    font-display: swap;
  }
  

• 验证字体文件路径的正确性
  移动端浏览器对相对路径的解析可能和桌面端存在差异，你可以通过以下方式排查：

  1. 用Safari的Web检查器（需要在iPhone的「设置- Safari浏览器- 高级」中开启「Web检查器」）或Chrome远程调试连接移动端设备，查看Network面板中字体文件的请求状态。
  2. 如果显示404错误，说明路径错误，调整为正确的相对路径（比如字体放在CSS文件夹下，路径应为url('./your-font.woff2')）或绝对路径。

• 配置跨域资源共享（CORS）
  如果你的字体文件和网页不在同一域名下，或者服务器未配置CORS，移动端浏览器会出于安全策略阻止字体加载。你可以在服务器上添加响应头：

  • 若使用Apache，在.htaccess文件中添加：

    <FilesMatch "\.(ttf|otf|woff|woff2)$">
      Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
    

  • 若使用Nginx，在服务器配置中添加：

    location ~* \.(ttf|otf|woff|woff2)$ {
      add_header Access-Control-Allow-Origin *;
    }
    

• 强制浏览器刷新缓存
  移动端浏览器的缓存可能会导致新字体无法加载，你可以给字体文件添加版本号或哈希值，强制浏览器重新下载：

  src: url('your-font.woff2?v=1.1') format('woff2');
  

  后续更新字体时，只需修改版本号即可。

• 检查font-family调用的一致性
  部分移动端浏览器对字体名称的大小写敏感，确保页面中使用的font-family名称和@font-face中声明的完全一致（包括引号和大小写），比如不要将'YourCustomFont'误写为'yourcustomfont'。

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