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

【问题标题】：ttf files not rendering on Chrome and Firefoxttf 文件无法在 Chrome 和 Firefox 上呈现
【发布时间】：2013-01-01 19:57:28
【问题描述】：

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

【问题讨论】：

...为什么不能在文档中添加<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>？
因为我确实需要系统/服务器上的 ttf 文件，因此从那里读取更可行。
需要吗？ 让 Google 托管字体的意义就像为 jQuery 使用著名的 CDN：很有可能您的大部分用户已经将字体缓存之前他们甚至来到您的网站。
看到的一点是，在使用上面的 google 链接时，如果你检查 URL，你会看到渲染是通过 .woff 再次 ....所以问题 remians ....只有 TTF WOFF？
当您使用 Google Font API 时，它会生成一个stylesheet，该stylesheet 对您的特定浏览器最合适且最有效。访问该 URL 后，您在 IE9（包括 EOT 格式）中的样式表与您在 Chrome 中看到的样式表不同。他们实际发送的格式无关紧要。浏览器仍然会很好地呈现它。

标签： html css google-chrome firefox font-face

【解决方案1】：

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

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

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

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

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

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

【讨论】：

感谢您的回答，但我确实需要 ttf 文件，因为我在使用 Imagick PHP 生成文本图像时需要相同的文件。在公司中，您需要按照告诉您的操作.. :) 所以我发现问题是重命名 ttf 文件。
如果您的真正问题是使用 ImageMagick 中的字体，那么您应该在问题中说明这一点，因为这与在 HTML 文档中嵌入字体是完全不同的问题。
不，问题是为什么在 woff 时没有将 ttf 呈现到网页上。你试图告诉我只使用谷歌链接，而我明确表示我需要从服务器使用它。问题已明确说明
在某些情况下（也在 SO 中讨论过），字体在与来自 Google 网站的 link 一起使用时不起作用，但在下载、使用 FontSquirrel 处理并上传到自己的服务器时工作正常。此外，使用谷歌托管的谷歌字体使得事情依赖于用户设备与谷歌网站的连接。通常，从您自己的网站上使用它们会更好（Google 提供了下载）。
它不一定会在 Chrome for Windows 中正确呈现。似乎存在需要 SVG 而不是 WOFF 的问题，否则 Chrome 会不高兴。 Google 字体似乎没有 SVG 版本 :(

【解决方案2】：

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

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

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

}

效果很好。

【讨论】：

我下载了Philosopher，更改了.ttf文件的名称，并进行了测试。在 Chrome 和 Firefox 上都可以正常工作。所以问题不在于重命名。也许您重命名的 .ttf 文件的名称与您在 @font-face 中使用的名称不匹配。
那么你能提供一个小提琴吗？因为它只是对我不起作用。
我不知道如何将字体文件上传到jsfiddle，但这里有一个普通服务器上的演示：cs.tut.fi/~jkorpela/js/philosopher.html
您可以为 .ttf 文件使用任何您想要的有效名称，只要您正确匹配名称。

【解决方案3】：

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

【讨论】：