Mac与Windows浏览器字体高度渲染问题

我正在使用自定义字体和@ font-face标记。 在Windows中,无论是Firefox,Chrome还是IE,一切看起来都很棒。

在Mac上,这是一个不同的故事。 出于某种原因,Mac字体渲染器认为字体比现在短得多。

例如,考虑这个testing代码( 在这里的实例 ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Webble</title> <style type="text/css"> @font-face { font-family: "Bubbleboy 2"; src: url("bubbleboy-2.ttf") format('truetype'); } body { font-family: "Bubbleboy 2"; font-size: 30px; } div { background-color: maroon; color: yellow; height: 100px; line-height: 100px; } </style> </head> <body> <div>The quick brown fox jumped over the lazy dog.</div> </body> </html> 

在Windows Firefox和Mac Firefox上打开它。 用你的鼠标来select它。

在Windows上,您会注意到它完全select了字体。

在Mac上,它只能select大约一半的字体。 如果你看看它select什么,你会看到那个部分已经居中,而不是字体的全部高度。

有没有办法解决这个相当大的差距?

Solutions Collecting From Web of "Mac与Windows浏览器字体高度渲染问题"

字体的上升太小。 Windows浏览器(以及Mac Safari也在我的测试中)只是抛出上升值不正确,而Mac上的Firefox和Opera接受它。

解决这个问题的最简单的方法是使用ttx, FontTools的一部分。

像这样使用它:

 % ttx bubbleboy-2.ttf [...] % edit bubbleboy-2.ttx 

改变上升值为1100(或任何适合你的):

  <hhea> <tableVersion value="1.0"/> <ascent value="1100"/> 

然后重新构造字体:

 % ttx bubbleboy-2.ttx Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"... [...] 

这个新的字体应该是固定的; 您可以通过在Font Book中打开来进行检查。

如果你想要一个更直观的问题的图片,尝试FontForge ,虽然被警告它的接口是相当巴洛克式的。 打开字体后,请双击大写字母; 你会看到一个水平线平分字形。 这是(错误的)上升。 您可以在元素>字体信息中修复上升,然后单击常规。 取消勾选“规模大纲”或上升会更大,但仍然是错误的。 🙂

但是,要修改字体,我会建议ttx超过FontForge这样的小改动,因为它不太可能摧毁它不明白的东西。

我能够通过上传TTF版本到FontSquirrel并选择“专家”选项,然后保留所有默认选项来修复我的字体。 修复它的那个我认为是“Fix Vertical Metrics”。

现在字体行高度在MAC和PC上呈现相同。 祝你好运

其实Windows是罪魁祸首。 Windows ClearType字体渲染器实际上是将字体的形状压入像素边界,使其更“清晰”,而Mac OS则不会触及字体的形状(我非常喜欢 )。 这通常导致屏幕上的“更高”或“更薄”的字形,而在Mac OS上,您可以根据设计者的意图获得真实的字体表示。

杰夫·阿特伍德(Jeff Atwood)的一篇文章解释了这些差异。 无论如何,你将无法绕过它。

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html