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将页面中所需的所有字体添加到集合中，它将生成相应的{{3}} {1}}代码。）

让Google托管这些字体就像使用知名的CDN for jQuery一样：很有可能你的很大一部分用户在他们来到你的网站之前已经有了缓存的字体（事实上）他们可能浏览过使用相同字体的其他网站。

请注意，您从API链接到的CSS实际上是生成的，用于Google服务器的每个请求，并将其定制到用户的浏览器。基于用户代理，选择最合适的格式（WOFF，EOT，TTF等），并且只列出样式表中的格式。

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

Answer 2

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

Answer 3

实际上问题是TTF文件无法重命名或者不能重命名。正如我做的那样，他们没有被浏览器渲染。虽然重命名WOFF就好了，因为它们是压缩文件。

问题肯定是重命名，就像我在字体中使用Philosopher-Regular.ttf一样：

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

}

它运作得很好。

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

3 个答案: