CSS字体引入失败咨询：是否需使用绝对URL？

咱们先拆解下你的场景：index.php在public_html目录，通过子域访问上级目录的样式表，背景图能正常加载但字体不行，字体和样式表同属一个Web根目录，存在fonts子文件夹里。结合这些信息，咱们一步步排查：

先排查最常见的两个核心问题 #

1. 跨域资源共享（CORS）限制 #

浏览器对字体文件的跨域限制比图片严格得多——图片默认允许跨域加载，但字体文件会被浏览器的同源策略拦截，尤其是当你的主域（加载index.php的域名）和子域（加载样式表的域名）不一致时。

解决办法：
在样式表所在的子域服务器上配置CORS规则，允许主域访问字体资源：

• 如果你用Apache，在Web根目录的.htaccess文件里添加：

  Header set Access-Control-Allow-Origin "https://你的主域名.com"
  # 测试阶段可以临时允许所有域（生产环境不推荐）
  # Header set Access-Control-Allow-Origin "*"
  

• 如果你用Nginx，在子域的server配置块里添加：

  add_header Access-Control-Allow-Origin "https://你的主域名.com";
  

2. 字体文件的MIME类型未正确配置 #

服务器如果没给字体文件设置正确的MIME类型，浏览器可能会拒绝加载字体，但图片对MIME类型的容错率很高，这就能解释为什么背景图正常、字体不行。

解决办法：
在服务器配置里添加字体对应的MIME类型：

• Apache（.htaccess）：

  AddType font/ttf .ttf
  AddType font/otf .otf
  AddType font/woff .woff
  AddType font/woff2 .woff2
  AddType application/font-woff .woff
  AddType application/font-woff2 .woff2
  

• Nginx（server配置块）：

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

再检查路径是否正确 #

虽然你说字体和样式表同Web根目录，但还是建议你打开浏览器开发者工具的「Network」标签，刷新页面后查看字体文件的请求状态：

• 如果是404错误，说明url()里的路径写错了。比如样式表在Web根目录，那字体的相对路径应该是url('fonts/你的字体文件.woff2')；如果样式表在Web根目录的子文件夹里，就得写成url('../fonts/你的字体文件.woff2')。
• 要是嫌相对路径麻烦，直接用绝对URL引入字体也是个稳妥的办法，比如url('https://你的子域名.com/fonts/你的字体文件.woff2')，这样能彻底避免路径解析的问题。

最后验证 #

配置完上述内容后，清空浏览器缓存再刷新页面，看看字体能不能正常加载。如果还是不行，可以把Network里字体请求的具体错误信息贴出来，方便进一步排查。

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