5

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

6 回答 6

8

这不起作用，因为所有版本的 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";
于 2013-10-01T23:11:14.913 回答
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;

}

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

尝试修复这些东西

  1. 从字体文件和字体名称引用中删除 _ 或 -

  2. 将其放在 webserver 或 localhost webserver 上进行测试。

  3. 防弹语法，你已经做到了。

  4. 检查所有字体不是 0KB

  5. 尝试将字体 ttf 转换为 otf，然后再转换为 eot。

仍然无法正常工作，那么您将无法转换为 webfont。

于 2013-10-06T17:41:08.183 回答
1

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

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

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

步骤 3：浏览后从 fontsquirrel 下载您的网络字体。

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

sep5：您可以按照该演示文件进行操作。

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

于 2014-10-09T03:42:20.663 回答
1

您在实际使用它们的 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。

于 2013-10-08T15:11:50.993 回答
1

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

于 2016-08-02T10:13:35.387 回答
-1

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

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

还有另一个关于 SO here的有用帖子

谢谢大家！

于 2014-04-29T18:56:23.627 回答