css - Windows 上的 Chrome 和 Firefox 上的字体基线被破坏

Question

我有一个奇怪的问题，我为此浪费了数小时但无济于事。我们有一个网站，其自定义字体实现为:

@font-face{
font-family:LilGroteskBold;
src:url(../fonts/LilGroteskBold.eot);
src:url(../fonts/LilGroteskBold.eot?#iefix) format("embedded-opentype"),
url(../fonts/LilGroteskBold.woff) format("woff"),
url(../fonts/LilGroteskBold.ttf) format("truetype"),
url(../fonts/LilGroteskBold.svg#LilGroteskBold) format("svg")
}

现在，在 OSX 和 IE(是的，这不是你经常听到的)上，一切都可以顺利运行，但在 Windows 上的 Chrome 和 Firefox 上，字体基线完全被破坏了。问题的图片在这里:

http://www.restons-serieux.com/broken_baseline.jpg

如您所见，u、a、e 低于基线，m 和 r 高于基线……一团糟。

我们怀疑是其中一种文件类型导致了问题，但我们仅尝试了 woff、仅 svg、未尝试 svg 等，但均无济于事:它始终如此。

有没有人遇到过这种情况？感谢大家的帮助:)

Answer 1

如果您将 font-weight 属性更改为粗体而不是数字，那应该可以解决问题:)