【发布时间】：2016-08-05 22:06:17
【问题描述】：
我们正在开发一个包含数千种字体的大型打印应用程序。从历史上看，这些都是使用 Flash 显示的，但显然，我们现在正在研究 HTML5。
WOFF 字体的子集显示垂直向下偏移最多几个像素 - 这似乎与转换器无关。 （我已经尝试了十几个 WOFF 转换并且都显示相同的位置。）
很明显，受影响的字体中有一些东西会导致 WOFF 从 OTF / TTF / SWF 位置垂直向下显示。谁能给我指出一个可以解释什么的参考资料？
谢谢， G
ETA：在下面的 cmets 之后，我对其进行了编辑以包含一个 MCVE。
所选择的示例演示了 ClarendonNo1URW-Lig 字体如何在浏览器外部使用相同字体的预期位置下方显示少量像素。
链接的屏幕截图中的蓝色矩形说明了在查询字体以定位在最后一行基线和第一行上升之间时的预期边界 - 以匹配 InDesign 显示定位。
所有定位值都是从这些字体上升/下降值明确计算出来的，并且已经针对 1000 多种字体进行了验证 - 它们在 90% 以上的字体中都是像素完美的，但有些（例如示例）垂直向下移动。
此外，这种现象在一系列浏览器中似乎都是一致的 - 在 FireFox、Edge、Opera、Chrome 中观察到类似的行为......
这似乎与转换器无关 - 我已经尝试了几乎十几种转换器，从在线 ttf 到 woff 服务再到购买的软件，包括 TransType 等。用原始 TTF 或 OTF（如适用）交换 WOFF 并不能消除问题，因此可能是原始字体文件本身中的某些内容暗示浏览器向下显示。但我不知道什么或如何查询它以允许相同。
示例 HTML 页面显示问题如下。使用 lineheight 0 和 span 的绝对定位是为了消除浏览器渲染器特定的舍入效果，否则会嘲笑任何像素完美字体布局的尝试。
<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>
【问题讨论】：
-
这个....问题毫无意义。 WOFF 从字面上看是一种逐字节无损压缩的 OpenType 字体。想添加更多详细信息、mcve、特定字体、浏览器控制台调试信息，以及任何能让与 OpenType 和网络打交道的人了解您遇到的问题的内容吗？
-
很抱歉没有任何意义，但有可验证的观察支持；与使用非网络字体的桌面发布相比，在 1000 种字体中，900+ 种显示与我期望的垂直对齐。但其余部分明显移位（通常向下）最多几个像素。这适用于将 html 中的 lineheight 设置为 0 以消除其他影响的相同代码。我将考虑提供一个 MCVE，但这显然因字体的专有性质而变得复杂。
-
从简单的开始：选择一种字体，编写一个使用该字体的单段网页，在其 opentype 形式中使用
@font-face，然后再次使用相同的字体，但通过“专业”WOFF 转换工具运行（ google 的 woff 转换器、FontForge 等）。如果您无法分发字体，请说出您使用的字体（因为人们可能拥有它），显示您使用的代码（html + css），屏幕截图并显示几种不同浏览器的结果，说出您使用的工具转换，然后你就会有一个包含大量信息和细节的问题。 -
MCVE 添加 - 看起来问题是浏览器处理特定字体而不是 WOFF 转换本身 - 例如：与桌面。