html - 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> ；相反，请使用 tool 将页面中所需的所有字体添加到一个集合中，它将生成适当的 <link> 标签。 )

让 Google 托管字体就像为 jQuery 使用著名的 CDN:很有可能您的大部分用户在访问您的网站之前就已经缓存了字体(由于事实他们可能浏览过使用相同字体的其他网站)。

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

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