IE 10 不加载字体答案

【问题标题】：IE 10 not loading fontsIE 10 不加载字体
【发布时间】：2013-10-04 03:55:23
【问题描述】：

相关网站链接：http://qbtei.com/nationalretail/public

在我的 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 */
}

在 Firefox/chrome 中，这些字体没有问题，但在 IE 10 中，当我检查元素时，此 css 文件显示为空且未加载字体

我尝试使用 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;

}

我在 css 中这样使用我的字体：

.nav-text{
    font-family: GothamLight;
    font-size: 21px;
    color: #d9e3e9;
    font-weight: 100;
    position: absolute;
  right: 28px;
  top: 13px;
}

【问题讨论】：

我猜你有这个，但只是为了仔细检查你的网站是否包含 DOCTYPE？即
是的，我必须仔细检查一下
好吧，我就是这么想的。如果您使用开发者工具（F12 键）并将浏览器模式更改为 IE 8 或 9，图像会加载吗？
如果我在 IE 10 兼容模式下运行它会加载一些字体，但网站的其余部分会爆炸
嗯。每个字体需要两次相同的 src 吗？

标签： css internet-explorer fonts font-face

【解决方案1】：

这不起作用，因为所有版本的 IE 都不支持 .otf 字体格式 - 请参阅：https://caniuse.com/ttf

试试下面的方法：

@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");
}

您使用 fontsquirrel 的 webfont 生成器生成的版本中的路径设置是否正确？字体系列名称也看起来错误。我想应该是“GothamBold”。

还要记住适当的字体许可证......！ ;-)

在您的 CSS 文件中使用字体时，您至少应该像这样添加一个通用字体系列：

font-family: GothamLight, "sans-serif";

或另外一种替代字体（可能在每个平台上都可用）

font-family: GothamLight, Arial, Helevetica, "sans-serif";

【讨论】：

【解决方案2】：

你有错误的路径参考，在这段代码中

@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;

}

据我所知，所有字体都放在字体文件夹下。如果这不起作用。

尝试解决这些问题

从字体文件和字体名称引用中删除 _ 或 -
将其放在 webserver 或 localhost webserver 上进行测试。
防弹语法，你已经做到了。
检查所有字体不为0KB
尝试将字体 ttf 转换为 otf，然后再转换为 eot。

仍然无法正常工作，则无法转换为 webfont。

【讨论】：

【解决方案3】：

您在实际使用它们的 style.css 之前加载字体样式表：

<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" />

只需先加载 fonts.css，然后加载 style.css。

【讨论】：

【解决方案4】：

我找到了一个非常好用的 otf 到 woff 转换器

http://everythingfonts.com/otf-to-woff

另外一篇关于 SO here的有用帖子

谢谢大家！

【讨论】：

【解决方案5】：

字体生成器是最好的解决方案。我正在使用字体 quirrel http://www.fontsquirrel.com/tools/webfont-generator。

Step1：下载字体并保存到本地系统。

第二步：得到 fontssquirrel 网站。然后单击添加字体按钮以从本地系统浏览您的字体。

第三步：浏览后从 fontsquirrel 下载你的网络字体。

第四步：解压压缩包。您生成的字体带有演示文件。

sep5：你可以关注那个演示文件。

步骤6：请为您的文件提供正确的网址。这很重要。

【讨论】：

这并不能解决问题中的问题。请尝试解决 OP 提出的问题，不要回答尚未提出的相关问题。

【解决方案6】：

经过大量挖掘，我找到了IE加载字体失败的另一个原因：
响应标头可能不包含 Pragma: no-cache Cache-Control: no-cache
另见@font-face EOT not loading over HTTPS

【讨论】：