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

Question

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

7

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

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

例如，请考虑以下测试代码（点击此处查看实时示例）：

<!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上，它只选择了大约一半的字体。如果您查看所选内容，您会发现该部分已居中，而不是字体的完整高度。

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

- cdmckay

3个回答

3

我成功解决了字体问题，方法是将TTF版本上传到FontSquirrel，选择“Expert”选项，并保留所有默认设置。我相信其中一个修复的选项是“Fix Vertical Metrics”。

现在字体行高在MAC和PC上呈现相同的效果。祝好运！

- Justin

-3

实际上，Windows 是罪魁祸首。Windows 的 ClearType 字体渲染器会将字体的形状锤入像素边界，以使其更加“清晰”，而 Mac OS 不会触及字体的形状（这正是我非常喜欢的）。这经常导致屏幕上出现“更高”或“更细”的字形，而在 Mac OS 上，您可以获得设计师预期的真实字体。

这里有一篇 Jeff Atwood 的文章，解释了这些差异。无论如何，您都无法避免它。

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

- Nick Bedford

天啊...真的吗？好烦啊。我想我得想出一些CSS黑科技 :( - cdmckay

不幸的是，字体的呈现方式超出了网页设计师的控制范围，除非你下定决心使用图像或者可能提供服务器呈现的标题图像。 - Nick Bedford

7

这完全不正确；与此描述的字符高度近一半相比，像素网格的变化微乎其微。问题只是一个有缺陷的字体。请看我的回答。 - Nicholas Riley

Mac OS 在这里肯定出了错。如果给定一个类似的字体错误，如果您将行高设置为与父元素相同的高度，则在 Windows 上它将正确居中，而在 Mac 上则会偏离。这绝对是一个错误，而不是一个功能。 - Ecksters

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicholas Riley · Accepted Answer

字体的上升高度太小了。Windows浏览器（以及我在测试中的Mac Safari）会将上升高度值视为不正确而忽略，而Mac上的Firefox和Opera则会接受它。

最简单的解决方法是使用FontTools中的ttx。

使用方法如下：

% 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，但请注意其界面相当复杂。一旦您打开了字体，请双击一个大写字母；您将看到一个水平线穿过字形。这是（错误的）上升高度。您可以在Element > Font Info中修复上升高度，然后单击“常规”。取消选中“缩放轮廓”，否则上升高度会变得更大，但仍然不正确。 :-)

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