0

在一个设计精良的网站 (http://www.distinctlydeutschland.com/) 上找到了这个片段：

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

}

我目前使用谷歌字体，并且使用过 CUFON——这似乎是一个更好的选择，因为它提供了更多的字体选择（因为我可能可以上传我自己的字体文件）并且它还允许用户拖动选择文本，这与 CUFON 不同.

问题是我不知道这种语法是什么意思，或者文件（.woff、.eot 等）是如何创建的，它们都做了什么等等。如果我只有 .ttf 会起作用吗？或者这是由某些网络字体服务提供商生成的？

4

1 回答 1

1

@font-face 是一种定义在 CSS 中使用的字体的方法。在该基础上，您将使用以下内容在具有类的元素上设置字体classname：

.className {
    font-family:TrajanProBold;
}

某些字体格式仅适用于某些浏览器，这就是为什么有多个后备。

这里有一张表格，其中列出了哪些格式适用于哪些浏览器：http: //www.stunningcss3.com/resources/fontface-file-types-browser-support.html

有关@font-face 的更多信息：http: //sixrevisions.com/css/font-face-guide/

于 2012-05-02T22:09:40.887 回答