从包加载时字体路径更改为相对答案

【问题标题】：Font path change to relative when loaded from bundle从包加载时字体路径更改为相对
【发布时间】：2017-11-26 03:04:22
【问题描述】：

我已将插件 css 文件捆绑为

 StyleBundle adminArea = new StyleBundle("~/files/css/admin/common");
 adminArea.Include("~/assets/global/plugins/font-awesome/css/font-awesome.css");

由于字体真棒使用位于其目录中的字体，我将其位于该插件目录中的字体复制到根级别的字体文件夹并将css文件中的位置更改为

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), 
      url('/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), 
      url('/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), 
      url('/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
       url('/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

当请求此捆绑包时，使用相对路径作为字体源 url 的字体真棒 css 文件点字体更改为 ../fonts/*.eot?v=4.4.0

@font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}

这使得请求转到为未放置字体的包创建的虚拟路径。

我的困惑是为什么捆绑将字体绝对路径更改为相对路径。如何在不创建为捆绑包创建的文件夹结构的情况下解决此问题？ MVC 版本 5 .NET 框架：4.5

注意

我只在未缩小版的 css 缩小版中更改了字体 url 没有以任何方式触及版本。
我还在捆绑包中启用了优化。

【问题讨论】：

是的，CSS 中的路径是相对于 CSS 文件的。捆绑后，CSS 文件路径将更改为您的捆绑名称。但是，请查看此问答，因为它指定了如何在 CSS 包中保留您的路径 - stackoverflow.com/questions/20484188/…。简短的答案是 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform())); - 请注意捆绑声明末尾的 CssRewriteUrlTransform()。
@Tommy 感谢您提供信息。我尚未测试您提供的解决方案，但我认为在 Include 方法中附加额外的参数可以让人思考该参数将对该包含的文件执行什么操作。我将很快测试该解决方案，但我找到了解决问题的方法。
这是一个有效的担忧，但实际上非常无害。该额外参数将 CSS 中的相对 URL 转换为 CSS 中的绝对 URL。这就是允许捆绑包仍然以您给它的名称呈现的原因，同时保持与您的图标、字体等的链接。

标签： asp.net-mvc asp.net-mvc-5 bundling-and-minification asp.net-bundling

【解决方案1】：

我不知道在捆绑和缩小中是如何处理或实施的，但以下解决方案对我有用，我希望对像我一样面临或将面临问题的人有用。

正如我所说，我只在未缩小版的 css 中更改了字体路径，而缩小版的 css 未受影响。

虽然您在包含未缩小版 css 的捆绑包中启用优化，并且您已为同一文件缩小版 css，例如

Sample.css 和 Sample.min.css

然后创建一个包和缩小将采用原始缩小版本的 css，而不是缩小未缩小的 css 版本。

因此更改两个文件中的字体路径将解决问题。这也应该适用于图像。

【讨论】：