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文件正在呈现到浏览器中?
- ...为什么不能只将<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>添加到文档中?
-
由于我确实需要系统/服务器上的ttf文件,因此从那里读取文件更可行。
-
需要?让Google托管字体的意义就如同使用著名的jQuery CDN一样:很有可能您的很大一部分用户在进入您的网站之前就已经缓存了字体。
-
看到的一点是,在使用上面的google链接时,如果您检查URL ull,则再次通过.woff呈现渲染..因此问题是remians ....没有仅TTF的WOFF吗?
-
当您使用Google Font API时,它将生成最适合您特定浏览器的样式表。转到该URL将使您在IE9(包括EOT格式)中获得与在Chrome中看到的样式表不同的样式表。它们实际发送什么格式都没有关系。浏览器仍会很好地呈现它。
-
我希望我的应用程序可以在脱机环境中使用。我的应用程序在本地托管,但不需要Internet连接。
请勿从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版本。不过请放心,您的字体将在所有浏览器中正确呈现。
- 谢谢您的回答,但是我确实需要ttf文件,因为在使用Imagick PHP生成文本图像时也需要使用ttf文件。在企业中,您需要按照告诉您的方式进行操作..::)因此,我发现问题在于ttf文件的重命名。
-
如果您真正的问题是在ImageMagick中使用字体,那么您应该在问题中这样说,因为与在HTML文档中嵌入字体相比,这是一个完全不同的问题。
-
没问题的是,为什么在woff期间不将ttf呈现到网页上。而且您试图告诉我仅在我明确声明需要从服务器使用它时使用Google链接。该问题已明确说明
-
在某些情况下(也在SO中进行了讨论),当字体与Google网站上的link一起使用时,字体不起作用,但是在下载,使用FontSquirrel处理并上传到自己的服务器上时,字体可以正常工作。此外,使用由Google托管的Google字体会使事情取决于用户设备与Google网站的连接。通常,最好在您自己的网站上使用它们(Google会提供下载)。
-
它不一定会在Windows版Chrome中正确显示。您似乎需要一个SVG而不是WOFF的问题,否则Chrome不满意。 Google字体似乎没有SVG版本:(
-
@Jedidja:Windows上的Chrome在WOFF字体方面没有任何问题(从技术angular来看)。有些人不喜欢字体在Windows上的呈现方式(使用ClearType而不是简单的抗锯齿),但这完全是主观的-我认为它们很好。从技术的angular来看,使用SVG是一个hack,并且存在一些缺点。
-
我希望我的应用程序可以在脱机环境中使用。我的应用程序在本地托管,但不需要Internet连接。
在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;
} |
它工作得很好。
-
我下载了Philosopher,更改了.ttf文件的名称,并进行了测试。在Chrome和Firefox上均可正常运行。因此,问题不在重命名中。重命名的.ttf文件的名称可能与@font-face中使用的名称不匹配。
-
好吧,您能为此提供一个小提琴吗?因为它没有用在我这边。
-
我不知道如何将字体文件上传到jsfiddle上,但这是普通服务器上的一个演示:cs.tut.fi/~jkorpela/js/philosopher.html
-
您可以为.ttf文件使用任何想要的有效名称,只要您正确进行名称匹配即可。