Symfony3.4与Assetic在Dev/Prod环境下的资源加载差异问题

我来帮你拆解一下这个跨环境的字体加载问题，本质是Assetic在开发/生产模式下的资源处理逻辑差异，加上相对路径的解析规则导致的：

一、开发环境（带app_dev.php）Font Awesome失效的原因 #

开发模式下，Assetic默认不会合并你的CSS文件，而是直接输出原始CSS文件的引用。假设你的主CSS里写的Font Awesome字体路径是../fonts/xxx.ttf：

• 当访问URL是www.mycompany.com/app_dev.php/xxx时，浏览器会把这个相对路径解析为www.mycompany.com/app_dev.php/fonts/xxx.ttf，但你的字体实际存在于web/fonts/（对应根路径/fonts/），自然就返回404了。
• 而Google字体用的是绝对URL（比如https://fonts.googleapis.com/...），不受当前URL路径影响，所以能正常加载。

二、生产环境Google字体@import失效的原因 #

生产模式下，Assetic会自动合并、压缩你的CSS文件，并且默认启用cssrewrite过滤器（用来修正相对路径）。这里的问题出在：

• cssrewrite过滤器会扫描CSS里的所有相对路径并重写，但它可能错误地把Google字体的绝对URL@import也当成相对路径处理，导致URL被篡改；
• 另外，有些CSS压缩工具（比如YUI Compressor）会把@import语句合并到主CSS里，或者因为绝对URL的存在导致处理异常，最终使得Google字体的引用失效。
• 而Font Awesome的相对路径../fonts/，会被cssrewrite重写为正确的根路径/fonts/，所以生产环境下反而正常。

三、统一解决办法 #

1. 修复Font Awesome的路径问题（适配开发+生产） #

推荐在Assetic的stylesheets标签里添加cssrewrite过滤器，让Assetic自动帮你修正所有相对路径：

{% stylesheets '@PimInterfaceBundle/Resources/public/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

这样不管是开发还是生产环境，Font Awesome的字体路径都会被解析为正确的/fonts/xxx.ttf。

2. 修复Google字体@import失效问题（适配生产环境） #

最可靠的方式是把Google字体的引用从CSS里移出来，直接在Twig模板的<head>里单独引入：

<link href="https://fonts.googleapis.com/css2?family=你的字体名称&display=swap" rel="stylesheet">

这种方式完全避开Assetic的处理逻辑，不管开发还是生产环境都能稳定加载。如果一定要保留在CSS里，需要在Assetic配置里排除对绝对URL的处理，但操作起来比较麻烦，不如直接单独引入省心。

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