我们正在开发一个包含数千种字体的大型打印应用程序。从历史上看,这些都是使用 Flash 显示的,但显然,我们现在正在研究 HTML5。
WOFF 字体的一个子集显示垂直向下移位最多几个像素 - 这似乎与转换器无关。(我已经尝试了十几个 WOFF 转换并且都显示相同的位置。)
很明显,受影响的字体中有一些东西会导致 WOFF 从 OTF / TTF / SWF 位置垂直向下显示。谁能指出我可以解释什么的参考?
谢谢,G
ETA:在下面的评论之后,我已经编辑了这个以包含一个 MCVE。
选择的示例演示了 ClarendonNo1URW-Lig 字体如何在浏览器外部使用相同字体的预期位置下方显示少量像素。
与使用相同字体从 InDesign 中提取的 PNG 相比,显示带有问题字体的 WOFF 的 HTML 页面的屏幕截图
链接的屏幕截图中的蓝色矩形说明了在询问字体以定位在最后一行的基线和第一行的上升之间时的预期边界 - 以匹配 InDesign 显示定位。
所有定位值都是从这些字体上升/下降值明确计算出来的,并且已经针对 1000 多种字体进行了验证——它们在 90% 以上的字体中都是像素完美的,但有些(例如示例)垂直向下移动。
此外,这种现象在一系列浏览器中似乎都是一致的——在 FireFox、Edge、Opera、Chrome 中观察到类似的行为......
这似乎与转换器无关 - 我已经尝试了从在线 ttf 到 woff 服务再到购买的软件(包括 TransType 等)的近十几种转换器。用原始 TTF 或 OTF(如适用)交换 WOFF 并不能消除问题,所以它可能是原始字体文件本身中的一些东西,暗示浏览器向下显示。但我不知道什么或如何查询它以允许相同。
示例 HTML 页面显示问题如下。使用 lineheight 0 和 spans 的绝对定位是为了消除浏览器渲染器特定的舍入效果,否则会嘲笑任何像素完美字体布局的尝试。
<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>