Question

在设计精良的网站上找到此代码段（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;

}

我目前使用Google字体，并且使用过CUFON - 这似乎是一个更好的选择，因为它提供了更多的字体选择（因为我可以上传我自己的字体文件），它也让用户拖动选择文本，不像CUFON。

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

Answer 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/

的更多信息

识别字体嵌入机制

1 个答案: