CSS IE 10 不加载字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19057748/
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
IE 10 not loading fonts
提问by Andrew Font
Link to site in question: http://qbtei.com/nationalretail/public
链接到相关网站：http: //qbtei.com/nationalretail/public
In my fonts.css i am loading a bunch of fonts like so:
在我的 fonts.css 中，我加载了一堆这样的字体：
@font-face {
font-family: GothamBook;
src: url('../fonts/Gotham-Book.otf');
src: url( ../fonts/Gotham-Book.otf ); /* IE */
}
@font-face {
font-family: GothamBookItalic;
src: url('../fonts/gothambookitalic.otf');
src: url( ../fonts/gothambookitalic.otf ); /* IE */
}
@font-face {
font-family: GothamBold;
src: url('../fonts/gothambold.otf');
src: url( ../fonts/gothambold.otf ); /* IE */
}
in Firefox/chrome these fonts work no problem, but in IE 10 when i inspect element this css file appears as empty and the fonts are not loaded
在 Firefox/chrome 中，这些字体没有问题，但在 IE 10 中，当我检查元素时，此 css 文件显示为空并且未加载字体
I have tried using http://www.fontsquirrel.com/tools/webfont-generatorto create a new font css sheet which looked like this, but this ended up not working in either firefox, chrome, or Internet Explorer
我曾尝试使用http://www.fontsquirrel.com/tools/webfont-generator创建一个看起来像这样的新字体 css 表，但这最终在 firefox、chrome 或 Internet Explorer 中都不起作用
@font-face {
font-family: 'gotham_boldregular';
src: url('gothambold-webfont.eot');
src: url('gothambold-webfont.eot?#iefix') format('embedded-opentype'),
url('gothambold-webfont.woff') format('woff'),
url('gothambold-webfont.ttf') format('truetype'),
url('gothambold-webfont.svg#gotham_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
I use my fonts in the css like this :
我在 css 中使用我的字体，如下所示：
.nav-text{
font-family: GothamLight;
font-size: 21px;
color: #d9e3e9;
font-weight: 100;
position: absolute;
right: 28px;
top: 13px;
}
回答by Netsurfer
This cannot work, as all versions of IE do not support the .otffont format - see: http://webfonts.info/node/379
这行不通，因为所有版本的 IE 都不支持.otf字体格式 - 请参阅：http: //webfonts.info/node/379
Try the following method:
尝试以下方法：
@font-face {
font-family: "GothamBook";
src: url("../fonts/Gotham-Book.eot");
src: url(".../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"),
url("../fonts/Gotham-Book.woff") format("woff"),
url("../fonts/Gotham-Book.ttf") format("truetype"),
url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");
}
Are the path settings correct in your version generated with fontsquirrel's webfont generator? Also the font-family name looks wrong. I guess it should be "GothamBold".
使用 fontsquirrel 的 webfont 生成器生成的版本中的路径设置是否正确？字体系列名称看起来也不对。我想它应该是“GothamBold”。
And also keep the appropriate font licence in mind ...! ;-)
还要记住适当的字体许可证......！;-)
In your CSS file when using the fonts, you should at least add a generic font-family like so:
在您的 CSS 文件中使用字体时，您至少应该添加一个通用的字体系列，如下所示：
font-family: GothamLight, "sans-serif";
or additionally an alternativ font (which might be available on each plattform)
或者另外一种替代字体（可能在每个平台上都可用）
font-family: GothamLight, Arial, Helevetica, "sans-serif";
回答by Bala
you have wrong path reference, in this code
你有错误的路径引用，在这段代码中
@font-face {
font-family: 'gotham_boldregular';
src: url('gothambold-webfont.eot');
src: url('gothambold-webfont.eot?#iefix') format('embedded-opentype'),
url('gothambold-webfont.woff') format('woff'),
url('gothambold-webfont.ttf') format('truetype'),
url('gothambold-webfont.svg#gotham_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
as i understood all fonts are placed under fonts folder. if this is not working.
据我了解，所有字体都放在 fonts 文件夹下。如果这不起作用。
Try fixing these things
尝试修复这些东西
Remove _ or - from font files and font name references
Place it on webserver or localhost webserver to test.
Bullet proof syntax, you have already done that.
Check all fonts are not 0KB
Try converting font ttf to otf and then convert to eot.
从字体文件和字体名称引用中删除 _ 或 -
将其放在 webserver 或 localhost webserver 上进行测试。
防弹语法，你已经做到了。
检查所有字体都不是 0KB
尝试将字体 ttf 转换为 otf，然后再转换为 eot。
Still not working then your cannot be converted to webfont.
仍然无法正常工作，则您无法将其转换为 webfont。
回答by Shahar
You are loading the fonts stylesheet before the style.css which actually uses them:
您正在实际使用它们的 style.css 之前加载字体样式表：
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" />
simply load fonts.css first, and then style.css.
只需先加载 fonts.css，然后加载 style.css。
回答by RAJA
Fonts generator is best solution for this. I am using fonts quirrel http://www.fontsquirrel.com/tools/webfont-generator.
字体生成器是最好的解决方案。我正在使用字体 quirrel http://www.fontsquirrel.com/tools/webfont-generator。
Step1: Download your font and save local system.
步骤1：下载您的字体并保存本地系统。
Step2: Got fontssquirrel site. And click Add Fonts button to browse your font from your local system.
步骤 2：获得 fontssquirrel 网站。然后单击添加字体按钮从本地系统浏览您的字体。
Step3: After browse download your webfonts from fontsquirrel.
步骤3：浏览后从fontsquirrel下载你的webfonts。
step4: extract the zip file. there is your generated fonts with a demo file.
step4：解压zip文件。您生成的字体带有演示文件。
sep5: you can follow that demo file.
sep5：您可以按照该演示文件进行操作。
step6: Please give correct url for your file. this is very important.
第6步：请为您的文件提供正确的网址。这是非常重要的。
回答by Jodi
After a lot of digging, I found another reason why IE fails to load fonts:
The Response header may notcontain
Pragma: no-cache
Cache-Control: no-cache
see also @font-face EOT not loading over HTTPS
经过大量挖掘，我发现了 IE 无法加载字体的另一个原因：
响应标头可能不包含
Pragma: no-cache
Cache-Control: no-cache
另见@font-face EOT not loading over HTTPS
回答by Oliver M Grech
I found a very good and helpful otf to woff converter
我发现了一个非常好的和有用的 otf to woff 转换器
http://everythingfonts.com/otf-to-woff
http://everythingfonts.com/otf-to-woff
Also another helpful post on SO here
还有关于 SO 的另一篇有用的帖子在这里
Thanks all!
谢谢大家！
