Mac与Windows浏览器字体高度渲染问题 [英] Mac vs. Windows Browser Font Height Rendering Issue
问题描述
我正在使用自定义字体和@ font-face标签.在Windows中，无论是Firefox，Chrome还是IE，一切都看起来不错.
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.
在Mac上，情况完全不同.由于某种原因，Mac字体渲染器认为字体比实际字体短很多.
On Mac, it's a different story. For some reason, the Mac font renderer thinks the font is a lot shorter than it is.
例如，考虑以下测试代码(此处为实时示例):
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>
在Windows Firefox和Mac Firefox上打开它.用鼠标选择它.
Open it on Windows Firefox and on Mac Firefox. Use your mouse to select it.
在Windows上，您会注意到它完全选择了字体.
On Windows, you'll notice it fully selects the font.
在Mac上，它只会选择大约一半的字体.如果查看它所选择的内容，将会看到该部分已经居中，而不是字体的整个高度.
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.
总有办法解决这个较大的差异吗?
Is there anyway to fix this rather large discrepancy?
推荐答案
字体的上升幅度太小. Windows浏览器(在我的测试中，也是Mac Safari)只是认为上升值不正确，而Mac上的Firefox和Opera接受了该值.
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.
解决此问题最简单的方法是使用ttx，它是 FontTools 的一部分.
The easiest way to fix this is with ttx, part of FontTools.
像这样使用它:
% ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx
将上升值更改为1100(或任何适合您的值):
Change the ascent value to 1100 (or whatever works for you):
<hhea>
<tableVersion value="1.0"/>
<ascent value="1100"/>
然后重新构造字体:
% 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.
如果您想更直观地了解问题，请尝试 FontForge ，尽管会警告其界面相当巴洛克式.打开字体后，双击一个大写字母.您会看到一条将该字形平分的水平线.这是(错误的)上升.您可以在元素">字体信息"中修复该上升，然后单击常规".取消选中比例轮廓"，否则上升幅度会更大，但仍然会出错. :-)
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上使用ttx进行较小的更改，因为这样不太可能破坏不了解的内容.
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.
这篇关于Mac与Windows浏览器字体高度渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
