Question

在我的ASP.NET MVC应用程序中，我使用Bundles来压缩css和js文件。问题是 - 启用优化模式后，字体未加载。

BundleTable.EnableOptimizations = true;

这是C＃代码

public static void RegisterBundles(BundleCollection bundles) {
    RegisterStyles(bundles);
    BundleTable.EnableOptimizations = true;
}

private static void RegisterStyles(BundleCollection bundles) {
bundles.Add(new StyleBundle("~/BundleStyles/css").Include(
    "~/Content/Styles/bootstrap/bootstrap.css",
    "~/Content/Styles/reset.css",
    "~/Content/Styles/gridpack/gridpack.css",

    "~/Content/Styles/fontFaces.css",
    "~/Content/Styles/icons.css",

    "~/Content/Styles/inputs.css",
    "~/Content/Styles/common.css",
    "~/Content/Styles/header.css",
    "~/Content/Styles/footer.css",
    "~/Content/Styles/cslider/slider-animations.css",
    "~/Content/Styles/cslider/slider-base.css"));
}

这是字体的CSS。

   @font-face {
      font-family: ProximaNova;
      src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
      font-weight: bold;
      font-style: normal;
    }

以下是页面中引用CSS的方式。

<link href="/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

但是，当我使用Chrome调试工具检查时，字体文件没有加载到页面，而且我的页面看起来很糟糕，字体错误。

我做错了什么？

Answer 1

嗯，我认为问题出在你的字体位置上。我假设捆绑的css虚拟位置/BundleStyles/css实际上并不存在。如果您的文件夹结构如下

内容＆gt;字体

内容＆gt;式

如果是这样，那么试试这个

将/BundleStyles/css更改为/Content/css

<link href="/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

并像这样引用你的字体

src: url('Fonts/ProximaNova/ProximaNova-Bold.otf')

在这种情况下，您的字体将相对于“css”文件加载，该文件位于内容文件夹中，该文件夹还包含“fonts”文件夹

如果我认为不正确，请告诉我们您的文件结构

Answer 2

我认为CssRewriteUrlTransform可能是要走的路：

https://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx

像这样使用：

.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())

为我工作。

Answer 3

上面的答案很好。

另一种选择 - 如果出于某种原因，上述内容对你不起作用 - 将改变@ font-face src属性引用'Fonts'文件夹的方式。 '../' -ing不能很好地捆绑，因此直接从站点根文件夹引用。假设'Fonts'文件夹是从根目录下来的一个，改变它：

@font-face {
  src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

对此：

@font-face {
  src: url('/Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

当站点在调试模式下运行时，您将检索相同的结果。

Answer 4

我今天去网上寻找这个，因为我遇到了这个问题。这对我有用：

/ bundle / wasn实际上是一个问题（我先试过这个）
我将单引号更改为双引号和＆amp;字体有效 - 但不知道为什么，所以如果有人知道请随意详细说明。

Answer 5

花了一些时间寻找此问题的解决方案。直到找到这篇文章，什么都没有做： https://mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc

简而言之：请确保引用捆绑软件的路径与Web应用程序文件夹结构不重叠。在我的情况下，一个css捆绑包的路径类似于位于〜/ Content / css文件夹中的文件。我已将捆绑包引用重命名为“〜/ css”（没有使用该名称的文件夹），错误已消失。

ASP.NET Bundles未加载字体文件

5 个答案: