ttf 文件无法在 Chrome 和 Firefox 上呈现

Question

我一直在尝试在 Chrome 和 Firefox 中渲染 ttf 文件，但它似乎不起作用。渲染 .woff 文件时工作正常。

我下载了该集合http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher，然后将其重命名为Philosopher-Regular.ttf，fancyfont.ttf然后尝试：

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

但该字体似乎并没有添加到网页上。但是，如果我将 woff 文件重命名为 fancyfont.woff 并尝试：

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

那么对于 Chrome 和 Firefox 来说一切都可以正常工作。

当我看到 ttf 文件被渲染到浏览器上时，这个问题有什么解决方案吗？

Answer 1

不要从 Google Font API 网站下载 TTF。它不适合您下载字体。@font-face相反，您链接到包含要使用的字体定义的样式表。

<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>

（如果您想要多种字体，请不要包含多个<link>s；相反，请使用该工具将页面中所需的所有字体添加到集合中，它将生成适当的<link>标签。）

让 Google 托管字体就像使用众所周知的 jQuery CDN 一样：很可能很大一部分用户在访问您的网站之前就已经缓存了字体（因为他们可能浏览过使用相同字体的其他网站）。

请注意，您从 API 链接到的 CSS 实际上是由 Google 服务器针对每个单独的请求生成的，并根据用户的浏览器进行定制。根据用户代理，选择最合适的格式（WOFF、EOT、TTF 等），并且仅在样式表中列出这些格式。

由于像 WOFF 这样的格式在大小方面比 TTF 更有效，因此大多数浏览器永远不会看到 TTF 版本。不过不用担心 - 您的字体将在所有浏览器中正确呈现。