2011-04-20 114 views
4

我在我正在制作的网站上首次使用web字体,并且我注意到字体的边框在Windows和Linux上似乎不同& Mac(在Linux上也是如此& Mac)。这不依赖于浏览器,因为所有操作系统上的相同版本的Chrome和Firefox都具有这些差异。基本上,在Windows上,角色顶部有额外的空间,而在Linux和Mac上,角色的边界框更接近角色的实际顶部(例如,变音箱位于框外)。这自然会改变位置,边距等的行为方式。在Windows,Mac和Linux上呈现不同的Web字体

目前字体被定义如下:

 
@font-face { font-family: "FranklinGothicHand"; 
    src: url('fonts/franklingothichanddemi-webfont.eot'); 
    src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'), 
     url('fonts/franklingothichanddemi-webfont.woff') format('woff'), 
     url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'), 
     url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
} 

由于这个原因,例如,我不能正确地垂直对齐的物品的装饰初始帽到制品的第一行是因为其位置在不同的操作系统上是不同的。

任何人都可以想到任何解决方案吗?

回答

3

我前几天正在关注这个问题,我在这个网站上找到了解释正在发生的事情。 http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/我从文章中得到的结论是,操作系统的渲染字体不同,唯一真正的修复显然是按摩字体本身,以使它们处理不同的OS渲染风格。不幸的是编辑实际字体可能不是我猜测的选项。

0

我刚刚发现-webkit-font-smoothing: antialiased; - 它似乎在OSX上的Safari和Chrome上做得很好。