cdm*_*kay 7 browser windows macos font-face
我正在使用自定义字体和@ 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上,它只选择大约一半的字体.如果您查看它所选择的内容,您将看到该部分已居中,而不是字体的完整高度.
反正有没有解决这个相当大的差异？
字体的上升太小了.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,但要警告它的界面相当巴洛克式.打开字体后,双击大写字母; 你会看到一条平分字形的水平线.这是(错误的)上升.您可以在元素>字体信息中修复上升,然后单击常规.取消选中"缩放轮廓"或上升将更大但仍然错误.:-)
但是,为了修改字体,我建议对FontForge进行ttx这样的小改动,因为它不太可能破坏它不理解的东西.
| 归档时间： |
|
| 查看次数： |
5011 次 |
| 最近记录： |