Question

我搜索过的所有文档都说明在CSS中加载外部字体文件的正确语法如下：

@font-face {
font-family: 'JosefinSansLight';
src: url('josefinsans-light-webfont.eot');
src: url('josefinsans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('josefinsans-light-webfont.woff') format('woff'),
     url('josefinsans-light-webfont.ttf') format('truetype'),
     url('josefinsans-light-webfont.svg#JosefinSansLight') format('svg');
font-weight: normal;
font-style: normal;
}

（如果有一个字体采用以上所有格式，当然，我这样做。）

但是，上述语法在Safari 5.0.2或Firefox 9中对我不起作用：字体根本无法加载。另一方面，当我尝试这个时：

@font-face {
font-family: 'Josefin Sans';
src: url('JosefinSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

加载并显示字体。（我没有IE可供测试）。

出了什么问题？我应该提一下，我最初只有TTF文件（我在第二个例子中加载的文件），并且我使用Fontsquirrel生成了其他版本（不加载的文件）。

编辑：检查我的Apache日志，我看到浏览器肯定是在拉字体（因此，它们位于正确的位置）。 Firefox只是在第二种情况下加载TTF字体（正如人们所期望的那样），而在第一种情况下它只加载EOT字体（代码中的第一种）而不是其他字体。 OTOH，Safari加载TTF，但在第一种情况下似乎没有加载任何东西。我也没有在日志中看到与字体相关的任何404错误。

Answer 1

好的，似乎我找到了解决方案。问题是我的CSS代码缺少一种字体格式，.OTF（OpenType）。我添加了以下行：

     url('fonts/JosefinSans-light.otf') format('opentype'),

Safari和Firefox都识别出字体。

现在：问题当然是我之前没有添加OpenType字体，因为Fontsquirrel首先没有为我生成它;这是唯一缺少的格式。我不得不拿另一个OTF文件，将其重命名为“JosefinSans-light.otf”并将其放置到位，以便进行测试。所以问题现在变成：如何从TTF生成OTF字体文件，EOT ...我有哪些？或者这是不必要的，我只是落后于时代？（我应该提一下，我仍然使用的是Mac OS X 10.5.8，并且现在没有任何其他计算机来测试这个东西。）

Answer 2

您是否尝试过：http://www.fontsquirrel.com/为您生成代码？如果他们做错了我会感到惊讶：）

Answer 3

在http://www.google.com/webfonts中，他们将其加载到外部，如下所示：

<link href='http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

然后你就做了font-family：'Didact Gothic'，sans-serif;你需要它的地方！我从来没有使用过fontsquirrel，但也许是这样的？

如果通过.css文件中的url加载它们，请检查路径是否正确

CSS外部字体：什么是正确的语法？

3 个答案: