CSS3 @ font-face无法在Mac OS X Safari 5.x或Chrome上显示

Question

嗨，大家对@ Font-Face有点困惑，无法弄清楚原因。我已经对最好的@ font-face代码进行了无数小时的研究，以便在Mac OS X浏览器上显示它无法显示的原因。

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

@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;
}

结果页面显示为......

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

* Apple Mac OS X - 适用于Firefox和Safari 6.x但不适用于Chrome或Safari 5.x

* Apple iOS iPhone和iPad - 工作正常

我很感激有关此问题的任何指导。

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

我很困惑，为什么它不起作用。提前谢谢。

Answer 1

问题在于你的ttf文件（它已损坏 - 看起来基线的改变方式使字体出现严重裁剪），这就是你得到这种行为的原因。提供其他格式（eot，woff，svg）的浏览器效果很好但是当浏览器选择提供ttf时，你会得到一个空白页面（虽然从技术上来说没有任何错误）。修复你的文件，你会很高兴。

这是您的woff文件：

这是您的ttf文件：