本地正常的CSS引入.woff字体上传至服务器后失效问题排查

这种字体加载失效的问题我碰到过好几次，结合你描述的情况——本地正常、CSS能正常加载、字体文件已上传且路径确认正确——大概率是服务器端的配置问题，给你整理几个排查和解决的方向：

1. 检查服务器的MIME类型配置 #

浏览器识别字体文件需要服务器返回正确的MIME类型，很多服务器默认配置里没有添加woff/woff2的类型，导致字体无法被正确解析。

• Apache服务器：在网站根目录的.htaccess文件中添加以下代码：

  AddType font/woff .woff
  AddType font/woff2 .woff2
  

• Nginx服务器：在对应的server配置块中添加：

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

• IIS服务器：在IIS管理器中找到网站的“MIME类型”，添加两个条目：扩展名.woff对应MIME类型font/woff，.woff2对应font/woff2。

2. 确认跨域资源共享（CORS）设置 #

如果你的HTML页面所在域名和字体文件的域名不一致（比如本地页面是localhost，字体在xathena.store），浏览器会触发跨域检查，服务器需要返回允许跨域的响应头才能加载字体。

• Apache：在.htaccess中添加：

  Header set Access-Control-Allow-Origin "你的页面域名"
  

  （生产环境不建议用*，最好指定具体域名，比如http://your-local-domain.com）
• Nginx：在server块中添加：

  add_header Access-Control-Allow-Origin "你的页面域名";
  

3. 检查字体文件的服务器权限 #

服务器上的字体文件可能因为权限不足，导致Web服务进程无法读取，返回403错误。

• 用SSH登录服务器，执行以下命令调整权限（以Apache/Nginx常用的www-data用户为例）：

  # 设置文件可读权限
  chmod 644 /path/to/your/fonts/*.woff
  # 设置文件所属用户为Web服务运行用户
  chown www-data:www-data /path/to/your/fonts/*.woff
  

  注意替换/path/to/your/fonts为你实际的字体文件路径，www-data根据你的服务器运行用户调整（比如有些是nginx）。

4. 再次核对@font-face中的路径 #

虽然你说路径正确，但要注意：CSS中的字体路径是相对于CSS文件的位置，而不是HTML页面。比如你的CSS文件在/PublicKeys/.../lib/styles/signin.css，字体文件在/PublicKeys/.../lib/fonts/pp-sans-small-light.woff，那么@font-face的src应该写成：

@font-face {
  font-family: 'pp-sans-small-light';
  src: url('../fonts/pp-sans-small-light.woff') format('woff');
}

另外，打开Chrome DevTools的Network标签，查看字体请求的状态码：

• 如果是404：说明路径还是有误，仔细核对；
• 如果是200但字体不显示：查看响应内容是否为正确的二进制字体文件（不是文本错误页）。

5. 强制清除浏览器缓存 #

有时候浏览器会缓存旧的错误资源，导致新的字体无法加载。可以用Ctrl+Shift+R强制刷新页面，或者在DevTools的Network标签中勾选「Disable cache」后重新测试。

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