网页字体在Windows，Mac和Linux上呈现不同的效果 [英] Webfonts rendering differently on Windows, Mac and Linux

问题描述

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

I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux & Mac (same on Linux & Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.

目前，字体的定义如下：

Currently the font is defined like this:

@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'); 
} 

因此，例如，我无法正确地将文章的装饰首字母上下对齐到这篇文章的第一行，因为它在不同的操作系统上的位置是不同的。

Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.

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

Can anyone think of any solution for this?

推荐答案

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

I was looking into this myself the other day and i came upon this site with an explanation of what is going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The takeaway i got from the article is that the OS's render the fonts differently and the only real fix is apparently to massage the font itself to make them deal with the different OS rendering styles. Unfortunately editing the actual font is probably not an option i am guessing.

这篇关于网页字体在Windows，Mac和Linux上呈现不同的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！