Grails 2.4.4从自定义URL加载CSS时字体图标加载失败求助

嗨，我刚好碰到过类似的问题！核心原因其实是浏览器解析CSS里相对路径的基准不一样，再结合Grails资源加载的特性导致的。让我给你拆解一下：

首先，浏览器解析CSS中的相对路径只看CSS文件本身的加载URL，和页面URL无关。咱们对照你的情况看：

• 你的字体文件实际在/myApp/assets/fonts/目录下，而style.css在/myApp/assets/stylesheets/目录下。如果直接访问/myApp/assets/stylesheets/style.css，../fonts/会被解析成/myApp/assets/fonts/，这完全正确。
• 但你现在用的两个URL都是/myApp/assets/style.css（完整域名版和根相对版），这说明Grails的Asset Pipeline（或者你配置的资源插件）把stylesheets/style.css打包/映射到了assets/style.css的路径下。这时候浏览器会认为CSS文件的路径是/myApp/assets/，所以../fonts/会被解析成/myApp/fonts/——这就和实际字体路径差了个assets/！

那为什么第二个URL（根相对的/myApp/assets/style.css）能正常加载？大概率是你页面所在的URL上下文刚好让浏览器“误打误撞”找到了字体，或者你的服务器有额外的路径映射把/myApp/fonts/指向了/myApp/assets/fonts/。但完整URL加载时，浏览器严格按照CSS的URL解析相对路径，就找不到资源了。

我给你几个靠谱的解决办法，按推荐程度排序：

1. 改用根相对路径指定字体（最简单直接） #

把@font-face里的相对路径改成带应用上下文的根绝对路径，这样不管CSS从哪个URL加载，字体都会指向正确位置：

@font-face { 
    font-family: 'icomoon'; 
    src: url('/myApp/assets/fonts/icomoon.eot?t0751g'); 
    src: url('/myApp/assets/fonts/icomoon.eot?t0751g#iefix') format('embedded-opentype'), 
         url('/myApp/assets/fonts/icomoon.ttf?t0751g') format('truetype'), 
         url('/myApp/assets/fonts/icomoon.woff?t0751g') format('woff'), 
         url('/myApp/assets/fonts/icomoon.svg?t0751g#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

2. 用Grails Asset Pipeline的路径助手（最优雅，适配上下文变化） #

如果你用的是Grails默认的Asset Pipeline插件，可以把style.css重命名为style.scss（或者用其他预处理器），然后用Asset Pipeline内置的asset-path函数自动生成正确路径，这样不用硬编码应用上下文：

@font-face { 
    font-family: 'icomoon'; 
    src: url(asset-path('fonts/icomoon.eot?t0751g')); 
    src: url(asset-path('fonts/icomoon.eot?t0751g#iefix')) format('embedded-opentype'), 
         url(asset-path('fonts/icomoon.ttf?t0751g')) format('truetype'), 
         url(asset-path('fonts/icomoon.woff?t0751g')) format('woff'), 
         url(asset-path('fonts/icomoon.svg?t0751g#icomoon')) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

之后用Grails的<asset:stylesheet src="style.scss"/>标签加载CSS，Asset Pipeline会自动把asset-path替换成包含应用上下文的正确路径。

3. 直接用CSS的实际路径加载 #

放弃/myApp/assets/style.css这个映射路径，直接用/myApp/assets/stylesheets/style.css加载CSS。这样../fonts/会被浏览器解析成/myApp/assets/fonts/，不管是完整URL还是根相对URL，都能正确找到字体文件。

你可以先打开浏览器的开发者工具（比如Chrome的F12），切换到Network标签，过滤类型为Fonts，然后分别用两个URL加载CSS并刷新页面，看看字体的请求URL是什么。如果是/myApp/fonts/xxx返回404，那就能确认是路径解析的问题，用上面的方法就能解决。

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