我正在使用自定义字体和@ 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什么，你会看到那个部分已经居中，而不是字体的全部高度。
有没有办法解决这个相当大的差距？
字体的上升太小。 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