ttf文件不在Chrome和Firefox上呈现 [英] ttf files not rendering on Chrome and Firefox

问题描述

我一直在试图获取在Chrome和Firefox中呈现的ttf文件，但它似乎并没有工作。我从$ > http://www.google.com/webfonts#UsePlace下载了这个集合： 然后将 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'）格式（'woff'）; 
 font-weight：normal; 
 font-style：normal; 
 
 
  
那么Chrome和Firefox都可以正常工作。 p> 
 
 
这个问题的任何解决方案，因为我已经看到了ttf文件被呈现到浏览器？
 
解决方案
请勿从Google Font API网站下载TTF。它不适合您下载字体。而是链接到包含要使用的字体的 @ font-face 定义的样式表。
 < 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版本。不要担心，尽管 -  ndash;您的字体将在所有浏览器中正确呈现。
 
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.

I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
then it all works fine for Chrome and Firefox.

Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
解决方案
Do not download a TTF from the Google Font API website.  It is not intended for you to download the fonts.  Instead, you link to a stylesheet which contains @font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)

Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).

Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser.  Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.

Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version.  Don't worry though – your font will be rendered correctly in all browsers.

                        
这篇关于ttf文件不在Chrome和Firefox上呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！