C# 字体文件未随 ASP.NET 包加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19000083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font files are not loading with ASP.NET Bundles
提问by Zafar
In my ASP.NET MVC application, I'm using Bundles to compress css and js files. The problem is - the fonts are not loading after i enable the optimization mode.
在我的 ASP.NET MVC 应用程序中，我使用 Bundles 来压缩 css 和 js 文件。问题是 - 启用优化模式后字体未加载。
BundleTable.EnableOptimizations = true;
Here is the C# code
这是 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"));
}
And here is the css for fonts.
这是字体的css。
@font-face {
font-family: ProximaNova;
src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
font-weight: bold;
font-style: normal;
}
Here is how CSS is beeing referenced in the page.
这是在页面中引用 CSS 的方式。
<link href="/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>
However, when i checked with Chrome Debugger tool, the font files are not loading to the page and my page looks bad with wrong fonts.
但是，当我使用 Chrome 调试器工具进行检查时，字体文件没有加载到页面中，而且我的页面看起来很糟糕，字体错误。
What am I doing wrong?
我究竟做错了什么？
采纳答案by Mahmoud Ibrahim
Well, I think the problem is with your font location. I'm assuming that the bundled css virtual location /BundleStyles/cssdoesn't actually exist. and if your folders structure like below
好吧，我认为问题在于您的字体位置。我假设捆绑的 css 虚拟位置/BundleStyles/css实际上并不存在。如果您的文件夹结构如下
Content > Font
内容 > 字体
Content > style
内容 > 风格
If this is true, then try this
如果这是真的，那么试试这个
change /BundleStyles/cssto /Content/css
更改/BundleStyles/css为/Content/css
<link href="/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>
and reference your font like this
并像这样引用您的字体
src: url('Fonts/ProximaNova/ProximaNova-Bold.otf')
in this case your font will be loaded relative to the "css" file which is located inside the content folder which also contains the "fonts" folder
在这种情况下，您的字体将相对于位于内容文件夹内的“css”文件加载，该文件夹还包含“字体”文件夹
If what I assumed is incorrect please show us how you structured your files
如果我的假设不正确，请向我们展示您的文件结构
回答by Matt
Great answer above.
上面的答案很好。
An alternative - if for some reason the above didn't work for you - would be to change how the @font-face src property references the 'Fonts' folder. '../'-ing doesn't work very well for bundling so reference directly from the site root folder instead. Assumung the 'Fonts' folder is one down from the root, change this:
另一种选择 - 如果由于某种原因上述方法对您不起作用 - 将更改 @font-face src 属性引用“字体”文件夹的方式。'../'-ing 不能很好地用于捆绑，因此直接从站点根文件夹引用。假设“字体”文件夹位于根目录下，请更改以下内容：
@font-face {
src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}
To this:
对此：
@font-face {
src: url('/Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}
You will retrieve the same results when the site is ran in debug mode too.
当站点在调试模式下运行时，您也将检索相同的结果。
回答by Melanie Sumner
I went looking online for this today because I am running into this issue. Here's what worked for me:
我今天去网上寻找这个，因为我遇到了这个问题。以下是对我有用的内容：
- The /bundle/ wasn't actually an issue (I tried this first)
- I changed single quotes to double quotes & the fonts worked - but no idea why, so if someone knows please feel free to elaborate.
- /bundle/ 实际上不是问题（我先尝试过）
- 我将单引号更改为双引号并且字体有效 - 但不知道为什么，所以如果有人知道，请随时详细说明。
回答by Snuffler_71
I think CssRewriteUrlTransform might be the way to go:
我认为 CssRewriteUrlTransform 可能是要走的路：
Used like so:
像这样使用：
.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())
Worked for me.
为我工作。
回答by user3088037
Spent some time looking for the solution of this issue. Nothing worked until I found this post: https://mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc
花了一些时间寻找这个问题的解决方案。在我找到这篇文章之前没有任何效果：https: //mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc
In a nutshell: make sure that paths that reference bundles do not overlap with web app file folder structures. In my case a css bundle had a path like it was a file located in ~/Content/css folder. I have renamed the bundle reference to "~/css" (no file folder with this name) and the error has disappeared.
简而言之：确保引用包的路径不与 Web 应用程序文件夹结构重叠。在我的情况下，css 包的路径就像位于 ~/Content/css 文件夹中的文件。我已将包引用重命名为“~/css”（没有具有此名称的文件夹）并且错误消失了。
