@ font-face在浏览器中产生截然不同的结果

Question

刚刚为我们的网站抓了一个@font-face包，并输入以下CSS代码：

@font-face {
    font-family: 'CartoGothicProLight';
    src: url('fonts/cartogothicpro-light-webfont.eot');
    src: url('fonts/cartogothicpro-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/cartogothicpro-light-webfont.woff') format('woff'),
    url('fonts/cartogothicpro-light-webfont.ttf') format('truetype'),
    url('fonts/cartogothicpro-light-webfont.svg#CartoGothicProLight') format('svg');

    font-weight: normal;
    font-style: normal;
}

不幸的是，每个浏览器的结果都是不同的。只有Firefox才能在Windows和OSX上正确使用它;其他人到处都是。

以下是我们所看到的：

任何可能出错的提示或指示/浏览器的字体行为都将非常受欢迎。

Answer 1

根据个人经验说话。

@font-face实际上工作正常，而且你使用的技术还可以 - 这更像是一个字体文件问题。

某些字体会渲染好的跨浏览器（阅读“结果令人赏心悦目并且可读”），有些字体只会让font hinting全部错误。我通常尝试使用几个相似的字体，看看哪个字体在浏览器中产生最佳结果，因为并非所有浏览器都使用相同的提示过程。

它还取决于字体的质量 - 有些不是用于较小的尺寸，设计糟糕 - 每个字体文件都附带它自己的提示说明，定义了如何在不同的字体大小上打开和关闭像素以最易读的方式显示字体。

我希望我能给你一些关于可能发生什么的见解，尽管我很难为你提供这个确切的例子。