问题描述
||
我正在我目前正在制作的网站上首次使用webfonts,我注意到在Windows和Linux&Mac上字体的边界框似乎有所不同(在Linux&Mac上也是如此)。这与浏览器无关,因为所有操作系统上的相同版本的Chrome和Firefox都有这些差异。基本上,在Windows上,角色顶部有多余的空间,而在Linux和Mac上,角色的边界框更接近角色的实际顶部(例如,变音符号在该框的外部)。这自然会改变位置,边距等的行为方式。
当前字体的定义如下:
@ 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 \')格式(\'woff \'),
url(\'fonts / franklingothichanddemi-webfont.ttf \')format(\'truetype \'),
url(\'fonts / franklingothichanddemi-webfont.svg#webfontLgJOAlmK \')format(\'svg \');
}
因此,例如,由于在不同的操作系统上它的位置不同,因此我无法正确地垂直对齐商品的装饰后的起始盖和商品的第一行。
谁能想到任何解决方案?
解决方法
前几天,我本人正在对此进行调查,并在此站点上进行了解释。 http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/从本文中得出的结论是,操作系统对字体的渲染方式不同,唯一真正的解决方法显然是按摩字体本身,以使它们处理不同的OS呈现样式。不幸的是,我猜测编辑实际字体可能不是一种选择。,也许使用带有此插件的javascript检测浏览器(请参见os.name)http://jquery.thewikies.com/browser/,然后使用该插件确定您要加载的样式表。如何使用JavaScript加载CSS文件?
字体在操作系统之间真的很奇怪,这并不奇怪,渲染不一致。,我刚刚发现了“ 0”字样-对于OSX上的Safari和Chrome来说似乎做得不错。