@字体面在浏览器中

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实际上工作正常，而且您使用的技术也没问题 - 它更像是一个字体文件问题。

某些字体会呈现ok的跨浏览器（请阅读“结果令人愉悦且易于阅读”），有些将只是得到font hinting全部错误。我通常会尝试使用几个相似的字体，并查看哪一个能够在跨浏览器上产生最佳效果，因为并非所有浏览器都使用相同的提示过程。

它也取决于字体的质量 - 有些只是不打算用于较小的尺寸，设计得很差 - 每个字体文件都带有它自己的提示说明，它们定义像素应该如何在不同的字体上打开和关闭大小以最可读的方式显示字体。

我希望我能给你一些关于可能发生的事情的见解，尽管我几乎无法为你提供这个确切例子的解决方案。