CSS3 @font-face 未在 Mac OS X Safari 5.x 或 Chrome 上显示答案

【问题标题】：CSS3 @font-face not displaying on Mac OS X Safari 5.x OR ChromeCSS3 @font-face 未在 Mac OS X Safari 5.x 或 Chrome 上显示
【发布时间】：2013-02-22 13:45:55
【问题描述】：

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

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

【问题讨论】：

在我的 Mac 上运行良好会不会是缓存问题？
绝对不是缓存问题。我在 Macbook 2008 (Safari 6.0) 上运行它，它可以工作，在它不显示的 Macbook 2007 (Safari 5.0.3) 上运行它。还尝试了 Adobe BrowserLab (browserlab.adobe.com/en-us/index.html#)，但它不显示。出于兴趣，您运行 Allan 的版本是什么？有什么想法吗？
在这里工作正常（OSX 10.8.2 / Chrome 最新）（使用 woff）。但问题是我已经下载了你的 ttf 文件，它似乎已损坏（它的预览被裁剪）

标签： macos google-chrome css safari font-face

【解决方案1】：

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

这是您的woff 文件：

这是您的ttf 文件：

【讨论】：

感谢 Alladinian！我现在已经修复了 ttf 文件，但它仍然拒绝出现在浏览器中。我已经清空了缓存和所有内容。然而，它现在至少出现在 Adobe BrowserLab 中。你能确认它现在工作吗？