PHP站点上线后引入路由文件导致FontAwesome与谷歌字体不显示如何解决

故障解决步骤 #

1 先排查Web服务器路由重写规则 #

这是上传路由文件后出问题的最高概率原因：重写规则把静态资源请求也转发到了PHP路由逻辑，没有返回真实的字体、样式文件。

• Nginx环境：确保站点配置里有静态资源优先匹配规则，不走PHP路由：

# 匹配所有字体、样式、图片等静态资源，存在则直接返回
location ~* \.(css|js|woff|woff2|ttf|eot|svg|jpg|png|gif|ico)$ {
    expires 365d;
    add_header Cache-Control "public";
    try_files $uri =404;
}
# 仅非静态资源请求走PHP路由入口
location / {
    try_files $uri $uri/ /index.php?$args;
}

• Apache环境：检查站点根目录的.htaccess文件，确保重写规则前加了真实文件/目录排除逻辑：

RewriteEngine On
# 排除真实存在的文件、目录，不走路由重写
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]

2 排查静态资源引用路径问题 #

如果重写规则无异常，检查页面内的资源引用是否用了相对路径：路由层级变化会导致相对路径解析错误，比如在二级路由/category/food下，相对路径./font-awesome.woff会被解析为/category/food/font-awesome.woff，找不到资源。
解决方法：所有静态资源引用统一用绝对路径，开头加/从站点根目录解析：

<!-- 错误写法，相对路径 -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- 正确写法，绝对路径 -->
<link rel="stylesheet" href="/assets/css/font-awesome.min.css">

如果是引用第三方字体/图标资源，直接写完整的https协议资源地址即可。

3 排查跨域配置（仅适用于控制台报CORS错误的情况） #

如果浏览器F12控制台提示字体资源跨域，给Web服务器加上字体资源的跨域响应头即可，以Nginx为例：

location ~* \.(woff|woff2|ttf|eot|svg)$ {
    add_header Access-Control-Allow-Origin "https://yourguide.city";
}

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