关于无法在Chrome和Firefox上呈现的html:ttf文件

ttf files not rendering on Chrome and Firefox

我一直在尝试获取在Chrome和Firefox中呈现的ttf文件,但似乎不起作用。渲染.woff文件时工作正常。

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

1
2
3
4
5
6
7
@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

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

1
2
3
4
5
6
7
@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

然后在Chrome和Firefox上一切正常。

任何解决此问题的解决方案,因为我已经看到ttf文件正在呈现到浏览器中?


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

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

(如果要使用多种字体,请不要包含多个<link>;相反,请使用该工具将页面中所需的所有字体添加到集合中,它将生成适当的<link>标记。)<铅>

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

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

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


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

的原因了。


实际上,问题在于TTF文件无法重命名或不应重命名。就像我做的一样,浏览器没有渲染它们。虽然WOFF的重命名很好,因为它们是压缩文件。

当我在字体中将Philosopher-Regular.ttf用作:

时,该问题肯定是重命名的

1
2
3
4
5
6
7
@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/Philosopher-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

它工作得很好。