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

标签 macos google-chrome css safari font-face

大家好，我对@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

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

最佳答案

问题出在您的 ttf 文件上(它已损坏 - 似乎基线被更改，字体看起来被严重裁剪)，这就是您出现此行为的原因。支持其他格式(eot、woff、svg)的浏览器运行良好，但是当浏览器选择支持 ttf 时，您会得到一个空白页面(尽管从技术上讲没有任何错误)。修复您的文件，您就可以开始了。

这是您的 woff 文件: enter image description here