javascript - 识别字体嵌入机制

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/