Question

我们正在开发一款包含数千种字体的大型打印应用。从历史上看，这些已经使用Flash显示，但显然，我们现在正在调查HTML5。

WOFF字体的一个子集垂直向下移动最多几个像素 - 这似乎与转换器无关。（我已经尝试了十几个WOFF转换，并且都显示相同的定位。）

显然，受影响的字体中有一些东西会导致WOFF从OTF / TTF / SWF位置垂直向下显示。任何人都能指出我可以解释什么的参考文献吗？

谢谢， ģ

ETA：根据以下评论，我编辑了此内容以包含MCVE。

选择的示例演示了ClarendonNo1URW-Lig字体如何在浏览器外部使用相同字体预期显示少量像素。

Screenshot of HTML page displaying WOFF with a problem font compared to PNG extracted from InDesign using the same font

截屏链接中的蓝色矩形说明了在询问字体到最后一行基线和第一行上升之间的位置时所期望的界限 - 以匹配InDesign显示位置。

所有定位值都是根据这些字体上升/下降值明确计算出来的，并且已针对超过1000种字体进行了验证 - 它们在90％以上的字体中都是完美的像素，但有些（例如示例）垂直向下移动。

此外，这种现象在各种浏览器中都是一致的 - 在FireFox，Edge，Opera，Chrome中也观察到类似的行为......

这似乎不依赖于转换器 - 我已经尝试了从在线ttf到woff服务的十几个转换器到购买的软件，包括TransType等。用原始的TTF或OTF（如果适用）交换WOFF并没有消除问题，所以它可能是原始字体文件本身的一些暗示浏览器显示低位。但是我不知道是什么或如何查询它以便考虑它。

示例HTML页面显示问题如下。使用lineheight 0和绝对定位的跨度是为了消除浏览器渲染器特定的舍入效果的影响，否则会嘲弄任何像素完美字体布局的尝试。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
@font-face {
font-family: 'ClarendonNo1URW-Lig';
src: url('/assets/compiled_fonts/ClarendonNo1URW_Lig.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
img {
width:3000px;
transform-origin:0 0;
}
p {
width:3000px;
background-color:#00AEEF; 
margin:0;
position:relative;
}
span {
line-height:0px;  
color: #000000;  
position: absolute;
}
</style>
</head>
<body>
<h1>As displayed by HTML</h1>
<div id="paraToStyle" style="text-align:left; ">
<p style="height: 226.8px;" id="bobParent">
<span id="bobToStyle" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 36px;">Net netted nets nest nests stents N e t n s l y L</span>
<br>
<span id="bobToStyle2" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 122.4px;">hairdressing Sillily Lloyds of Lyana LYANG</span>
<br>
<span id="bobToStyle3" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 208.8px;">Better BETTER fet Fetter Gest Fest</span>
</p>
</div>
<br>
<h1>As exported from InDesign</h1>
<img style="transform: scale(1, 1);" src="/fontImages/ClarendonNo1URW_Lig.png" id="paraImageFromInDesign">
</body>

Answer 1

您可能需要通过修复Mac / PC垂直指标的工具重新进行此操作。（例如Fontsquirrel）

在浏览器中发生这种情况时，这似乎是此主题中描述的问题：Mac vs. Windows Browser Font Height Rendering Issue。

通过命令行的另一个选项似乎是通过FontTools摆弄TTX配置

WOFF与OTF / TTF / SWF的垂直位置？

1 个答案: