Mac 与 Windows 浏览器字体高度渲染问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2854028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mac vs. Windows Browser Font Height Rendering Issue
提问by cdmckay
I'm using a custom font and the @font-face tag. In Windows, everything looks great, regardless of whether it's Firefox, Chrome, or IE.
我正在使用自定义字体和 @font-face 标签。在 Windows 中，无论是 Firefox、Chrome 还是 IE，一切看起来都很棒。
On Mac, it's a different story. For some reason, the Mac font renderer thinks the font is a lot shorter than it is.
在 Mac 上，情况就不同了。出于某种原因，Mac 字体渲染器认为字体比实际短很多。
For example, consider this test code (live example here):
例如，考虑这个测试代码（这里是现场示例）：
<!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>
Open it on Windows Firefox and on Mac Firefox. Use your mouse to select it.
在 Windows Firefox 和 Mac Firefox 上打开它。使用鼠标选择它。
On Windows, you'll notice it fully selects the font.
在 Windows 上，您会注意到它完全选择了字体。
On Mac, it only selects about half the font. If you look at what it is selecting, you'll see that that part has been centered, instead of the full height of the font.
在 Mac 上，它只选择大约一半的字体。如果您查看它正在选择的内容，您会看到该部分已居中，而不是字体的全高。
Is there anyway to fix this rather large discrepancy?
有没有办法解决这个相当大的差异？
采纳答案by Nicholas Riley
The font's ascent is too small. The Windows browsers (and Mac Safari, too, in my testing) just throw out the ascent value as incorrect, whereas Firefox and Opera on the Mac accept it.
字体的上升太小。Windows 浏览器（以及 Mac Safari，在我的测试中）只是将 ascent 值视为不正确而丢弃，而 Mac 上的 Firefox 和 Opera 接受它。
The easiest way to fix this is with ttx, part of FontTools.
解决此问题的最简单方法是使用 ttx，它是FontTools 的一部分。
Use it like this:
像这样使用它：
% ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx
Change the ascent value to 1100 (or whatever works for you):
将上升值更改为 1100（或任何适合您的值）：
<hhea>
<tableVersion value="1.0"/>
<ascent value="1100"/>
Then reconstitute the font:
然后重构字体：
% ttx bubbleboy-2.ttx
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"...
[...]
This new font should be fixed; you can check by opening it in Font Book.
这个新字体应该是固定的；您可以通过在 Font Book 中打开它来检查。
If you want a more visual picture of the problem, try FontForge, though be warned its interface is rather baroque. Once you've opened the font, double-click a capital letter; you'll see a horizontal line bisecting the glyph. This is the (wrong) ascent. You can fix the ascent in Element > Font Info, then click General. Uncheck "Scale Outlines" or the ascent will be bigger but still wrong. :-)
如果您想更直观地了解问题，请尝试FontForge，但要注意它的界面相当巴洛克。打开字体后，双击大写字母；您会看到一条水平线将字形一分为二。这是（错误的）上升。您可以在“元素”>“字体信息”中修复上升，然后单击“常规”。取消选中“Scale Outlines”，否则上升会更大但仍然是错误的。:-)
However, to modify the font, I would recommend ttx over FontForge for small changes like this because it's less likely to destroy what it doesn't understand.
但是，要修改字体，我建议使用 ttx 而不是 FontForge 来进行这样的小改动，因为它不太可能破坏它不理解的内容。
回答by Justin
I was able to fix my font by uploading the TTF version to FontSquirreland selecting the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics."
我能够通过将 TTF 版本上传到FontSquirrel并选择“专家”选项然后保留所有默认选项来修复我的字体。我认为修复它的方法是“修复垂直指标”。
Now the font line height renders the same on MAC and PC. Good luck
现在字体行高在 MAC 和 PC 上呈现相同。祝你好运
回答by Nick Bedford
Actually Windows is the culprit. Windows ClearType font renderer actually hammers the font's shape into pixel boundaries to make it "clearer" whereas Mac OS doesn't touch the shape of the font (which I very much prefer). This often leads to "taller" or "thinner" glyphs on screen, whereas on Mac OS you get a true representation of the font as the designer intended.
实际上，Windows 是罪魁祸首。Windows ClearType 字体渲染器实际上将字体的形状敲入像素边界以使其“更清晰”，而 Mac OS 不会触及字体的形状（我非常喜欢）。这通常会导致屏幕上出现“更高”或“更薄”的字形，而在 Mac OS 上，您会得到设计师想要的字体的真实表现。
Here's an article by Jeff Atwood explaining the differences. In any case, you're not going to be able to get around it.
这是 Jeff Atwood 的一篇文章，解释了这些差异。在任何情况下，你都无法绕过它。
http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html
http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html
