我一直在尝试在 Chrome 和 Firefox 中渲染 ttf 文件，但它似乎不起作用。渲染 .woff 文件时工作正常。
我从以下网站下载了该合集http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher然后重命名为Philosopher-Regular.ttf to fancyfont.ttf然后尝试：
@font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
但该字体似乎并没有添加到网页上。但是，如果我将 woff 文件重命名为 fancy font.woff 并尝试：
@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您要使用的字体的定义。
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
（不包括多个<link>s 如果您想要多种字体；相反，使用tool http://www.google.com/webfonts将页面中所需的所有字体添加到集合中，它将生成适当的字体<link> tag.)
让 Google 托管字体就像使用众所周知的 jQuery CDN 一样：很可能很大一部分用户在访问您的网站之前就已经缓存了字体（因为他们可能浏览过使用相同字体的其他网站）。
请注意，您从 API 链接到的 CSS 实际上是生成的针对 Google 服务器的每个单独请求，根据用户的浏览器进行定制。根据用户代理，选择最合适的格式（WOFF、EOT、TTF 等），并且仅在样式表中列出这些格式。
由于像 WOFF 这样的格式在大小方面比 TTF 更有效，因此大多数浏览器永远不会看到 TTF 版本。不过别担心——你的字体will在所有浏览器中都能正确呈现。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
