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

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

4

3 回答 3

7

字体的上升太小。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 进行这样的小改动，因为它不太可能破坏它不理解的内容。

于 2010-05-18T02:00:38.203 回答
3

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

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

于 2014-01-10T23:43:22.247 回答
-3

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

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

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

于 2010-05-18T01:21:59.767 回答