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

All the documentation I've searched says that the right syntax to load external font files in CSS is the following:

我搜索过的所有文档都说在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;
}

(Provided one has the font in all the above formats, of course, which I do).

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

However, the above syntax doesn't work for me in Safari 5.0.2 or Firefox 9: the font simply doesn't load. On the other hand, when I try just this:

但是，上述语法在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;
}

The font does get loaded and displayed. (I don't have IE available to test).

字体确实被加载和显示。（我没有IE可供测试）。

What's wrong? I should mention that I originally had only the TTF file (the one I'm loading in the second example), and that I generated the other versions (the ones that don't load) using Fontsquirrel.

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

Edit: checking my Apache logs, I see that the browser is definitely pulling the fonts (therefore, they are in the right location). Firefox just loads the TTF font in the second case (as one would expect), while in the first case it only loads the EOT font (the first one in the code), not the others. OTOH, Safari loads the TTF, but doesn't seem to load anything in the first case. I don't see any 404 errors related to fonts in the logs either.

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

3 个解决方案

#1

OK, it seems that I found the solution. The problem is that my CSS code lacked ONE font format, .OTF (OpenType). I added the following line:

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

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

And both Safari and Firefox recognized the font.

Safari和Firefox都认可了这种字体。

Now: the problem, of course, is that I didn't add the OpenType font before because Fontsquirrel didn't generate it for me in the first place; it was the only format missing. I had to take another OTF file that I had, rename it to "JosefinSans-light.otf" and put it in place, in order to test it. So the question now becomes: how can I generate an OTF font file from the TTF, EOT... ones that I have? Or is this unnecessary, and I'm just behind the times? (I should mention that I'm still on a Mac OS X 10.5.8, and don't have any other computer to test this thing on right now).

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

#2

-1

Have you tried: http://www.fontsquirrel.com/ to generate your code for you? I would be surprised if they were doing it wrong :)

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

#3

-1

In http://www.google.com/webfonts they load it externally like this:

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

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

and then you just do font-family: 'Didact Gothic', sans-serif; where you need it! I've never used fontsquirrel, but maybe it something like that?

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

And if loading them by url inside .css file, check that the path is correct

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

#1