Question

指向相关网站的链接：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;
}

Answer 1

这不起作用，因为所有版本的IE都不支持.otf字体格式 - 请参阅：http://webfonts.info/node/379

尝试以下方法：

@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生成器生成的版本中的路径设置是否正确？此外，font-family名称看起来不对。我想它应该是“GothamBold”。

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

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

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

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

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

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

}

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

尝试修理这些东西

从字体文件和字体名称引用中删除_或 -
将其放在网络服务器或localhost网络服务器上进行测试。
防弹语法，您已经完成了。
检查所有字体不是0KB
尝试将字体ttf转换为otf，然后转换为eot。

仍然没有工作，那么你就无法转换为webfont。

Answer 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。

Answer 4

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

步骤1：下载字体并保存本地系统。

第2步：获得fontssquirrel网站。然后单击“添加字体”按钮以从本地系统浏览字体。

步骤3：浏览从fontsquirrel下载您的webfonts。

step4：解压缩zip文件。你生成的字体有一个演示文件。

sep5：您可以关注该演示文件。

第6步：请为您的文件提供正确的网址。这非常重要。

Answer 5

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

Answer 6

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

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

SO here

上另一个有用的帖子

全部谢谢！

IE 10没有加载字体

6 个答案: