求助：移动端字体加载失败但桌面端正常，已更换SCSS引入方式

这种移动端和桌面端字体表现不一致的问题真的挺闹心的，我帮你梳理几个大概率的原因和对应的解决办法，你可以一步步排查：

1. 字体路径大概率出问题了 #

你写的url里用了多层/../的相对路径，这种写法很容易在不同环境下“翻车”——桌面端本地开发时路径可能能正确解析，但移动端部署的服务器层级或者打包后的文件结构说不定和桌面端不一样，直接就找不到字体文件了。

• 建议换个写法：要么用从根目录开始的绝对路径（比如/font/Regular-Regular.otf），要么用相对于SCSS文件的相对路径（比如你的SCSS在src/styles/文件夹，字体在src/font/，那路径就是../font/Regular-Regular.otf），尽量避免多层../绕来绕去，容易出错。
• 快速验证方法：打开浏览器开发者工具的网络面板，切换到移动端模式，看看字体文件的请求状态——如果是404，那肯定是路径错了，直接改就行。

2. 字体格式和代码语法要规范 #

看你的@font-face代码，好像有两个小问题：

• 每个url后面要加逗号分隔，你写的代码里好像漏了；而且格式优先级要注意，应该优先用更高效的woff2，再降级到woff，最后是otf。正确的写法应该是这样：

@font-face {
  font-family: 'Regular';
  font-weight: 400;
  src: url("../font/Regular-Regular.woff2") format("woff2"),
       url("../font/Regular-Regular.woff") format("woff"),
       url("../font/Regular-Regular.otf") format("opentype");
}

• 另外你代码最后写的是wof...，是不是打错成woff了？这种拼写错误在移动端更容易暴露，毕竟桌面端可能有 fallback 机制，移动端容错性差一些。

3. 跨域（CORS）限制 #

如果你的字体文件放在CDN或者其他域名下，移动端浏览器可能会因为CORS策略阻止加载，而桌面端本地开发时某些浏览器（比如Chrome）会放宽限制，所以才会出现差异。

• 解决办法：在存放字体文件的服务器上配置CORS响应头，添加Access-Control-Allow-Origin: *（或者指定你的业务域名），允许字体文件的跨域请求。

4. 移动端浏览器的特殊限制 #

有些移动端浏览器对自定义字体有“特殊要求”：

• 如果字体文件太大，移动端可能会直接放弃加载——你可以用字体压缩工具压缩一下，只保留业务需要的字符，缩小文件体积。
• 可以给@font-face加个font-display: swap;属性，这样即使字体没加载完，先显示系统字体保底，同时也能触发字体加载，避免出现“无文字”的情况：

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

5. 缓存搞的鬼 #

移动端可能缓存了之前内联字体的旧资源，现在改了SCSS引入，但缓存没清，导致字体还是加载失败。

• 快速解决：给字体文件的URL加个版本号，比如url("../font/Regular-Regular.woff2?v=1.0")，强制浏览器重新请求新的字体文件；或者手动在移动端浏览器里清除缓存再测试。

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