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

所有我搜索的文件说，正确的语法来加载CSS外部字体文件如下：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错误。

来源

2012-01-03 PaulJ

确保您将所有文件放在正确的位置。 – BoltClock 2012-01-03 02:40:48

-1

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

来源

2012-01-03 02:50:42

你看过这个问题吗？他说第一个片段是由Font Squirrel生成的。 – BoltClock 2012-01-03 02:52:10

哎呦 - 猜我最后错过了。但是 - 就像它说的那样，我怀疑他们是否做错了。 – 2012-01-03 03:28:02

-1

在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哥特式”，无衬线;你需要它的地方！我从来没有使用fontsquirrel，但也许是这样的？

而且如果.css文件中的URL加载它们，检查路径是否正确

来源

2012-01-03 02:56:16 Alex

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

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

Safari和Firefox都识别字体。

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

来源

2012-01-03 10:56:17 PaulJ

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

回答

相关问题