与字体大小或字体编码有关的字体定位错误答案

【问题标题】：Font positioning error relating to either font-size or font encoding与字体大小或字体编码有关的字体定位错误
【发布时间】：2013-03-28 11:17:37
【问题描述】：

我遇到了一个问题，当我指定line height:1 直到字体大小变得大于 255 像素时，字形的位置符合我的预期。将 font-size 设置为 256，然后 bam，字形会急剧改变位置并变得太高。

我正在使用 Google Web 字体引入 Josefin Sans - http://www.google.com/webfonts/specimen/Josefin+Sans

编辑：我在 Fedora 上使用 Chrome，而不是那些有市场份额和资金的酷机器之一

这里是简化的小提琴 - http://jsfiddle.net/jBAnc/

编辑：小提琴没有为我显示代码。如果你点击“培根”，它会在 255 和 256 之间切换，导致它来回弹跳（至少对我来说）。

当字体是基本的网络安全字体（如 Arial）时，我不会遇到这个问题，所以我认为它与 google 网络字体有关。这是字体编码的问题，可能是创建字体的程序（255 似乎很重要）？

【问题讨论】：

对于我在谷歌浏览器中，小提琴工作得很好。另外，你为什么想要这么大的字体？只是好奇。
大文本用于演示文稿中的标题。你在点击培根时字体没有上下移动？
在我使用 jsfiddle 时没有看到 255/256 之间的任何重大跳跃（测试：Chrome 23.0.1271.97、Safari (PC) 5.1.7、FF 17.0.1 和 IE 9）跨度>

【解决方案1】：

我遇到了与此字体不一致的行高/间距问题。我开始怀疑这是 Josefin Sans 本身的构造问题。

编辑：再谷歌搜索后，问题似乎不在于字体本身，而在于 Google Webfont API。

简答：自行下载和托管字体，您应该没有问题。

【讨论】：

【解决方案2】：

根本没有错。您只是希望所有字体都具有相同的 x 高度、下降器/扩展器高度，而它们却没有（10 次中有 9 次）。

以下小提琴说明了 4 种字体之间的区别（3 种是 Mac、PC 等上非常常见的字体）。 Josefin Sans 也在房子里。

特别注意以下方面的差异：

_http://jsfiddle.net/suK2U/

要回答您关于 255/256px 的问题，我敢说您刚刚遇到了容器与其父容器之间的“最佳位置”。在 256 处，它开始碰撞（并且边距开始塌陷，等等）。

【讨论】：

我根本不希望字体具有相同的高度。这个在那个断点发生了巨大的变化。另外，当我打开你的小提琴时，那些字体 x-heights 并没有像在你的图像中那样显示给我。我在稍旧版本的 Fedora 上使用 Chrome，所以问题可能就在那里。
只是为了检查一下，Josefin Sans for you 有足够的空间用于下降，我的 256px 版本看起来对吗？我想这就是它应该看起来的样子，我只是不确定它为什么会改变我。