IE 10 不加载字体

Posted 2023-03-15

【中文标题】IE 10 不加载字体

【英文标题】：IE 10 not loading fonts

【发布时间】：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 吗？

【参考方案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