MVC5项目中修改Bootstrap字体路径是否可行？有无更简便方法？

首先明确说：你移除@font-face规则里url开头的../这个操作是完全可行的，只要调整后的路径能让浏览器正确找到Content文件夹里的字体文件，页面缺失的元素自然就会恢复显示。不过直接修改Bootstrap的源文件（bootstrap.min.css和bootstrap.min.css.map）有个小弊端——以后如果要升级Bootstrap版本，你得重新做一遍路径修改，挺麻烦的。下面给你几个更简便、更易维护的方法：

方法1：用MVC的CssRewriteUrlTransform自动处理路径 #

MVC的捆绑（Bundling）功能自带了路径转换工具，能自动重写CSS里的相对路径，不用手动改Bootstrap文件。在App_Start/BundleConfig.cs里配置捆绑时，加上CssRewriteUrlTransform即可：

bundles.Add(new StyleBundle("~/bundles/css/bootstrap").Include(
    "~/Content/bootstrap.min.css",
    new CssRewriteUrlTransform()));

这个工具会把CSS里的相对路径转换成相对于捆绑文件的路径，不管你把字体放在Content下的哪个子文件夹，只要路径关系正确，就能自动匹配上。

方法2：使用根相对路径（以/开头） #

直接把@font-face里的url改成根相对路径，比如：

src: url('/Content/fonts/glyphicons-halflings-regular.eot');

这样不管你的CSS文件在哪个层级，浏览器都会从网站根目录开始找Content/fonts下的字体文件，路径永远不会错。不过要注意，如果你的项目在本地开发时用了虚拟目录，可能需要调整，但Azure部署一般都是根目录，这个方法非常省心。

方法3：用自定义CSS覆盖Bootstrap的@font-face规则 #

不要碰Bootstrap的源文件，自己新建一个custom-fonts.css放在Content文件夹里，重新定义@font-face规则并使用正确的路径，然后在页面里把这个自定义CSS放在Bootstrap CSS之后加载，这样就会覆盖原来的规则：

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot'); /* 根据你的实际路径调整 */
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

这种方法的好处是，以后升级Bootstrap时完全不用管路径的事，自定义规则会一直生效。

总结一下：你的临时解决方案是有效的，但从长期维护角度看，上面三个方法更优，能避免重复修改第三方库文件的麻烦。

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