CSS @font-face移动端失效求助：本地字体打包方案问题

嘿，我来帮你排查下这个本地字体在手机端失效的问题～先从代码里的小细节说起，再给你梳理几个常见的排查方向：

先修正代码里的语法错误 #

你写的@font-face规则最后一个url()后面多了个逗号，这个不起眼的小错误会让不少移动端浏览器（尤其是WebKit内核的）解析CSS时直接忽略整个字体规则，这很可能就是手机端不生效的核心原因之一。

另外还有几个小细节可以优化，修正后的代码如下：

/* 注意：@font-face规则要放在引用它的样式之前 */
@font-face {
  font-family: 'Century Gothic';
  /* 统一字体名称的大小写，避免匹配时出现大小写敏感问题 */
  src: url('../font/GOTHIC.woff2') format('woff2'),
       url('../font/GOTHIC.woff') format('woff'),
       url('../font/GOTHIC.TTF') format('truetype');
  /* 明确字体的权重和样式，确保和后续引用的规则匹配 */
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: black;
  font-family: 'Century Gothic', sans-serif;
  /* 必须添加后备无衬线字体，防止字体加载失败时出现乱码 */
}

其他可能导致手机端失效的排查点 #

• 文件路径问题：移动端服务器的路径解析逻辑可能和桌面端有差异，你可以用手机端浏览器的开发者工具（比如Chrome远程调试）查看Network面板，确认字体文件是否返回404错误。如果路径有问题，可以尝试改为绝对路径（比如/font/GOTHIC.woff2）测试。
• 字体格式优先级：WOFF2是目前兼容性最好、体积最小的字体格式，建议把它放在src列表的最前面，让移动端浏览器优先加载更适配的格式。
• 浏览器缓存问题：手机端浏览器的缓存通常比较顽固，修改CSS后可以长按刷新按钮选择「强制刷新」，或者给字体文件加版本号（比如url('../font/GOTHIC.woff2?v=1.0')）来绕过缓存。
• 跨域限制：如果你的字体文件部署在CDN或其他域名下，需要配置CORS规则允许当前域名加载字体文件（不过你用的是相对路径，这个可能性较低）。

验证方法 #

打开手机端的开发者工具，在Elements面板里查看body元素的font-family是否正确应用，再到Network面板确认字体文件是否成功加载、有没有报错信息，这样能快速定位剩余问题。

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