为什么垂直对齐会受深红色文本字体的字体粗细影响？答案

【问题标题】：Why is vertical alignment afftected by font-weight with Crimson Text font?为什么垂直对齐会受深红色文本字体的字体粗细影响？
【发布时间】：2017-02-28 16:19:01
【问题描述】：

最近我一直在玩http://nate.fm/articles/页面的锚标签的css如果你在链接Light或Pro-Life vs Pro-Birth周围分配边框并将它们的font-weight更改为超过500然后突然垂直对齐从中间到顶部变化。下面我添加了显示这一点的图像：

字体粗细 700：

字体粗细 500：

更令人惊讶的是，对于 Crimson Text 之外的任何其他字体系列，此错误都会消失。我试图在本地复制该错误但失败了。

谁能解释一下这个错误？

【问题讨论】：

在 mac 上使用 chrome 它不会改变 500 到 700 之间的任何内容。
@GermanoPlebani 在我的 windows 10 chrome 53.0.2785.143 上它发生了变化。这种字体肯定有问题。在this post 上，另一个用户遇到了一个相关的错误，该错误没有出现在我的window10 操作系统上。
个别字体仅设计为在一种特定尺寸下工作，增加粗细会产生虚假的粗体粗细，您不应该期望它可以工作。字体系列可能有更粗更轻的重量，更改font-weight 可以在它们之间进行选择。您需要使用 @font-face {font-family: xxxxx} 使用自定义字体设置此行为。
说我不确定行高到底是什么原因弄乱了，我看看我能找到什么。
让我们continue this discussion in chat。

标签： html css fonts vertical-alignment

【解决方案1】：

既然你提到它只发生在深红色文本中，它可能只是粗体时字体呈现的方式。在这里提出了类似的问题：Bold text line-height is higher than normal text line-height

我尝试禁用页面上的所有其他样式，看看是否有什么东西覆盖了它，但找不到任何罪魁祸首。

可能的解决方法可能只是添加一些 padding-top。

【讨论】：

在您链接的问题中，错误是关于line-height。但在我的情况下，行高不会改变。 box-sizing 在这里受到影响。同样正如 Germono 提到的那样，该错误不会出现在 mac OS 上。所以不是字体渲染是这样设计的；这是一个浏览器/操作系统特定的错误。
@user31782 提问者将其称为行高，但如果您阅读被接受的答案，则会提到这是因为字体本身而不是行高。我理解这意味着这种字体的呈现方式存在问题 - 特别是在某些浏览器/操作系统上。