CSS3 @ font-face在Mac OS X Safari 5.x或Chrome上不显示 [英] CSS3 @font-face not displaying on Mac OS X Safari 5.x OR Chrome

问题描述

大家对@ Font-Face有点困惑，不知道为什么.我对最佳的@ font-face代码进行了无数的研究，以了解为什么它无法在Mac OS X浏览器中显示.

Hi guys having a bit of a dilemna with @Font-Face and can't figure out why. I have done countless hours of research on the best @font-face code to use and troubleshooting as to why it would not display on a Mac OS X browser.

目前的情况是，我正在使用...

The current situation is, I am using...

@font-face {
font-family: 'Avenir LT 55 Roman';
src: url('fonts/avenir-55.eot?#iefix') format('embedded-opentype'), 
     url('fonts/avenir-55.woff') format('woff'), 
     url('fonts/avenir-55.ttf')  format('truetype'),
     url('fonts/avenir-55.svg#AvenirLT-Roman') format('svg');
     font-weight: normal;
     font-style: normal;
}

结果页面显示为...

And the resulting page displays as so...

* Windows操作系统-适用于所有浏览器(Chrome，Firefox，IE)

*Windows OS - Works on all browsers (Chrome, Firefox, IE)

* Apple Mac OS X-在Firefox和Safari 6.x上有效，但在Chrome或Safari 5.x上无效

*Apple Mac OS X - Works on Firefox and Safari 6.x but NOT on Chrome or Safari 5.x

* Apple iOS iPhone和iPad-运行正常

*Apple iOS iPhone and iPad - Works fine

在此问题上的任何指导，我将不胜感激.

I'd appreciate any guidance on this matter.

如果您想亲自观看，请查看 http://gradtouch.com/test

If you want to see it for yourself have a look at http://gradtouch.com/test

关于它为什么不起作用，我感到很困惑.预先感谢.

I'm just so confused as to why it won't work. Thanks in advance.

推荐答案

问题出在您的ttf文件上(文件已损坏-好像基线被改变了，字体似乎被大量裁剪了)，这就是为什么会出现这种行为.支持其他格式(eot，woff，svg)的浏览器可以很好地工作，但是当浏览器选择提供ttf时，您会得到一个空白页面(尽管从技术上讲，没有任何错误).修复您的文件，一切都会顺利进行.

The problem is with your ttf file (it's corrupted - it seems like the baseline is altered in a way that the font appears heavily cropped) and that is why you get this behavior. Browsers that serve the other formats (eot, woff, svg) work nice but when a browser choses to serve the ttf you get a blank page (although technically there isnt any error). Fix your file and you'll be good to go.

这是您的woff文件:

这是您的ttf文件:

这篇关于CSS3 @ font-face在Mac OS X Safari 5.x或Chrome上不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！