ASP.NET Bundles未加载字体文件

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实际上并不存在.如果你的文件夹结构如下

内容>字体

内容>风格

如果这是真的,那就试试吧

改变/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');
}

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