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

【问题标题】：Mac vs. Windows Browser Font Height Rendering IssueMac 与 Windows 浏览器字体高度渲染问题
【发布时间】：2010-05-18 01:16:25
【问题描述】：

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

在 Mac 上，情况就不同了。出于某种原因，Mac 字体渲染器认为字体比实际短很多。

例如，考虑这个测试代码（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>

在 Windows Firefox 和 Mac Firefox 上打开它。使用鼠标选择它。

在 Windows 上，您会注意到它完全选择了字体。

在 Mac 上，它只选择大约一半的字体。如果您查看它选择的内容，您会看到该部分已居中，而不是字体的整个高度。

有没有办法解决这个相当大的差异？

【问题讨论】：

标签： windows macos browser font-face

【解决方案1】：

字体的上升太小。 Windows 浏览器（在我的测试中也包括 Mac Safari）只是将 ascent 值丢弃为不正确，而 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"...
[...]

这个新字体应该是固定的；您可以通过在字体簿中打开来查看。

如果您想更直观地了解问题，请尝试FontForge，但请注意其界面相当巴洛克。打开字体后，双击一个大写字母；你会看到一条水平线将字形一分为二。这是（错误的）上升。您可以在 Element > Font Info 中修复上升，然后单击 General。取消选中“Scale Outlines”，否则上升会更大但仍然错误。 :-)

但是，要修改字体，我建议使用 ttx 而不是 FontForge 进行这样的小改动，因为它不太可能破坏它不理解的内容。

【讨论】：

谢谢 Nicholas，我会试一试的。
嗯，现在出现了一些新的奇怪现象：编辑 TTX 文件产生的字体在除 Windows 版 Chrome 之外的任何地方都可以使用，它似乎不接受它。
嗯，很有趣。如果我在不编辑任何内容的情况下将字体转换为 TTX 并返回 TTF，它仍然无法在 Chrome for Windows 上运行。一定是 TTX 的问题，我试试 FontForge。
呸，这很烦人，我从来没有遇到过 ttx 的任何问题。你可以向 Letteror 的人报告。
Editing hhea ascent 将调整 iOS/macOS 的上升；对于 Windows，编辑 winAscent 或 usWinAscent 属性。以下是每个操作系统使用的属性的一个很好的列表：glyphsapp.com/tutorials/vertical-metrics

【解决方案2】：

我可以通过将 TTF 版本上传到 FontSquirrel 并选择“专家”选项并保留所有默认选项来修复我的字体。我相信修复它的方法是“修复垂直指标”。

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

【讨论】：

【解决方案3】：

实际上，Windows 是罪魁祸首。 Windows ClearType 字体渲染器实际上将字体的形状锤击到像素边界以使其“更清晰”，而 Mac OS 不会触及字体的形状（我非常更喜欢）。这通常会导致屏幕上出现“更高”或“更薄”的字形，而在 Mac OS 上，您会得到设计者想要的字体的真实表示。

这是 Jeff Atwood 的一篇文章，解释了这些差异。无论如何，您将无法绕过它。

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

【讨论】：

呃……严重吗？多么痛苦。我想我得想出一些 CSS hack :(
不幸的是，字体的呈现方式超出了网页设计师的控制范围，至少在你硬着头皮使用图片或者给服务器渲染的标题图片之前是这样。
这根本不正确；与此处描述的字符高度的近一半相比，像素网格的变化很小。问题只是一个错误的字体。请看我的回答。
Mac OS 在这里肯定犯了一个错误。给定具有类似错误的字体，如果您将 line-height 设置为与父元素相同的高度，它将在 Windows 上正确居中，而在 Mac 上将关闭。绝对是错误，而不是功能。