54

在我的 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 调试器工具检查时，字体文件没有加载到页面上，而且我的页面看起来很糟糕，字体错误。

我究竟做错了什么？

4

5 回答 5

39

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

内容 > 字体

内容 > 风格

如果这是真的，那么试试这个

更改/BundleStyles/css为/Content/css

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

并像这样引用你的字体

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

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

如果我认为不正确，请向我们展示您的文件结构

于 2013-09-25T10:09:27.547 回答
32

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

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

像这样使用：

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

为我工作。

于 2016-01-29T11:14:10.970 回答
7

上面的答案很好。

另一种选择——如果由于某种原因上述方法对你不起作用——将更改@font-face src 属性引用“字体”文件夹的方式。'../' -ing 不适用于捆绑，因此请直接从站点根文件夹中引用。假设 'Fonts' 文件夹是根目录下的一个文件夹，请更改以下内容：

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

对此：

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

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

于 2015-05-19T12:45:22.883 回答
1

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

  1. /bundle/ 实际上不是问题（我首先尝试过）
  2. 我将单引号更改为双引号并且字体有效-但不知道为什么，所以如果有人知道，请随时详细说明。
于 2015-10-28T23:34:00.460 回答
0

花了一些时间寻找这个问题的解决方案。在我找到这篇文章之前没有任何效果： https ://mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc

简而言之：确保引用包的路径不与 Web 应用程序文件夹结构重叠。在我的例子中，一个 css 包的路径就像它是一个位于 ~/Content/css 文件夹中的文件一样。我已将包引用重命名为“~/css”（没有具有此名称的文件夹）并且错误消失了。

于 2019-11-08T01:38:15.613 回答