CSS3 @font-face 在 Mac OS X Firefox 上不可选

Question

在这篇文章的后面 (CSS3 @font-face not displaying on Mac OS X Safari 5.x OR Chrome) 我遇到了一个新的绊脚石。起初似乎一切都已解决，但后来我遇到了一个新问题，我无法选择任何文本。

在 Mac OS X 的 Firefox 上，我无法突出显示任何文本，甚至无法单击任何使用 font-face 字体的超链接。 它可以在所有其他操作系统（包括 Windows、iOS 等）和其他 Mac OS X 浏览器（如 Chrome 和 Safari）上选择。

在http://gradtouch.com/test 试试看

这是当前的 CSS 代码。

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

有什么想法或解决方案吗？

提前致谢。

Answer 1

乍一看，我猜该字体的指标有问题。如果我创建一个包含您的一些文本的 <span> 并给它一个边框以查看它有多高，那么 <span> 最终会达到 0px 高。

一旦发生这种情况，选择将不可见，因为它被绘制到文本的高度...