ASP.NET StyleBundle压缩后.woff/.ttf字体资源链接失效求助

你遇到的这个问题很典型——开发环境下CSS打包运行正常，部署后字体资源找不到，核心原因是StyleBundle的虚拟路径会改变CSS中相对路径的解析基准，再加上你没有给涉及字体的line-icons.css应用路径转换工具。

问题根源拆解 #

• 开发环境中，Bundle默认不会合并压缩资源，浏览器直接加载原line-icons.css文件，里面的url('fonts/xxx')是相对于该CSS所在的~/assets/plugins/line-icons/目录，所以能正确找到字体文件。
• 部署后，Bundle会将所有CSS合并成一个文件，并且以你定义的虚拟路径~/content/plugin作为基准来解析相对路径，这时候浏览器会去~/content/fonts/找字体，而实际字体在~/assets/plugins/line-icons/fonts/，自然就找不到了。
• 你已经给font-awesome.min.css加了CssRewriteUrlTransform()，但漏掉了line-icons.css，这就是为什么只有Simple-Line-Icons的字体失效。

最优解决方案：给所有带资源引用的CSS应用路径转换 #

直接修改你的Bundle配置，给每个包含相对路径资源（字体、图片）的CSS文件单独添加CssRewriteUrlTransform()，这个工具会自动把CSS里的相对路径转换成相对于应用根目录的绝对路径，彻底解决路径基准问题：

bundles.Add(new StyleBundle("~/content/plugin") 
 .Include("~/assets/plugins/animate.css")
 .Include("~/assets/plugins/line-icons/line-icons.css", new CssRewriteUrlTransform()) // 关键：给line-icons加路径转换
 .Include("~/assets/plugins/pace/pace-flash.css")
 .Include("~/assets/plugins/owl-carousel/owl.carousel.css")
 .Include("~/assets/plugins/cube-portfolio/cubeportfolio/css/cubeportfolio.min.css")
 .Include("~/assets/plugins/cube-portfolio/cubeportfolio/custom/custom-cubeportfolio.css")
 .Include("~/assets/plugins/login-signup-modal-window/css/style.css")
 .Include("~/assets/css/plugins/style-switcher.css")
 .Include("~/assets/css/theme-skins/one.dark.css")
 .Include("~/assets/css/custom.css")
 .Include("~/assets/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));

额外注意事项 #

• 如果你不确定哪些CSS包含相对路径资源，保险起见可以给所有CSS都加上这个转换（不会有副作用）。
• 避免把Bundle的虚拟路径设置成和实际物理目录同名，比如如果你的项目里真有~/content文件夹，可能会导致路径混淆，尽量用类似~/bundles/styles/plugin这种更清晰的虚拟路径。
• 不要手动修改CSS里的绝对路径——这种方式虽然能解决问题，但会降低代码的可移植性，一旦项目部署路径变化，又要重新修改所有路径，远不如用官方的路径转换工具优雅。

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