Question

我正在使用自定义字体和@ 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上，它只选择大约一半的字体。如果您查看它所选择的内容，您将看到该部分已居中，而不是字体的整个高度。

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

Answer 1

字体的上升太小。 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，但请注意其界面相当巴洛克式。打开字体后，双击大写字母;你会看到一条平分字形的水平线。这是（错误的）上升。你可以在Element＆gt;中修复上升字体信息，然后单击常规。取消选中“缩放轮廓”或上升将更大但仍然错误。： - ）

但是，为了修改字体，我建议对FontForge进行ttx这样的小改动，因为它不太可能破坏它不理解的东西。

Answer 2

我能够通过将TTF版本上传到FontSquirrel并选择“专家”选项然后保留所有默认选项来修复我的字体。修复它的那个我认为是“修复垂直度量标准”。

现在字体线高度在MAC和PC上呈现相同的效果。祝你好运

Answer 3

实际上Windows是罪魁祸首。 Windows ClearType字体渲染器实际上将字体的形状锤入像素边界以使其“更清晰”，而Mac OS不会触及字体的形状（我非常喜欢）。这通常会在屏幕上产生“更高”或“更薄”的字形，而在Mac OS上，您可以像设计师所希望的那样真实地表现字体。

以下是杰夫阿特伍德解释差异的文章。在任何情况下，你都无法绕过它。

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

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

3 个答案: