首页 文章

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

提问于
浏览
1

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

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

显然,受影响的字体中存在某些因素导致WOFF从OTF / TTF / SWF位置垂直向下显示 . 任何人都能指出我可以解释什么的参考吗?

谢谢,G

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和span的绝对定位是为了消除浏览器渲染器特定的舍入效果的影响,否则会 Mock 像素完美字体布局的任何尝试 .

<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>

1 回答

相关问题