2

我一直在尝试获取在 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 文件呈现到浏览器上，对此问题的任何解决方案？

4

3 回答 3

4

不要从 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 版本。不过不用担心——您的字体将在所有浏览器中正确呈现。

于 2013-01-18T06:28:36.910 回答
0

我在 Chrome 中渲染 TTF 字体时遇到了一些问题。将其转换为 Woff 即可解决。有一些很好的在线服务。您可以轻松找到它们。另外，我的字体变小了：29 Ko 到 6 Ko，我看不到使用 TTF 的理由

于 2017-08-19T11:23:47.490 回答
-1

实际上问题是TTF文件不能被重命名或者它们不应该被重命名。正如我所做的那样，它们没有被浏览器呈现。虽然 WOFF 的重命名很好，因为它们是压缩文件。

当我使用Philosopher-Regular.ttf字体时，问题肯定是重命名为：

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

}

它工作得很好。

于 2013-01-18T06:48:42.580 回答