Consolas比Verdana小

Question

我正在写一个网页，其中我想使用一种字体作为普通文本，另一种字体作为代码，所以我有以下CSS：

body {
    font-family:Verdana, sans-serif;
    font-size:100%;
}

code, pre {
    font-family:Consolas, monospace;
}

除了Consolas文本比Verdana文本小得多之外，这种方法是有效的。我可以通过将font-size:1.2em;添加到code, pre设置来修复它，但这感觉像是黑客攻击，特别是因为这个数字除了试验和错误之外没有任何其他东西。

这是不是碰巧是特定字体的怪癖，还是我做错了什么？

Answer 1

可惜，这是因为Consolas的x-height比Verdana小。你确实可以通过使用更大的字体大小来“修复它”，但是如果用户没有Consolas，页面将退回到默认的等宽字体，这将显示得太大。

正确的解决方案在于css3的font-size-adjust。遗憾的是，它根本没有得到很好的支持；据我所知，当时唯一支持它的主流浏览器是Firefox。

Answer 2

当您在CSS中定义字体大小时，您所做的就是定义了一个称为"em square“或"em box”的概念，即使您没有使用em单位。

em正方形得名是因为在金属印刷术的时代，每个字母都放在自己的金属“盒子”里，而在传统字体中，大写的拉丁M通常填满整个盒子的宽度，定义整个家族的大小。因此，就有了em盒子。虽然原始em框是由M的宽度定义的，但em单位本身指的是字符的最大允许高度。这只是为大写M创建的方框的结果。

简而言之，一个字体系列中的所有字母都需要放在em框中，但它们不必包含所有内容。因此，当您设置一个具有给定宽度的em框时，您所要做的就是定义用于放置字母的最大允许空间。从那时起，字体设计者在字距、几何形状、比例等方面的选择将决定他们的字体将占据多少方框。这就是为什么你必须使用两个不同的字体大小来使字母看起来是相同的。

Answer 3

字体大小相同。但在Verdana中，字符通常比大多数字体(大小相同)都要高。例如，Verdana中的“H”比Consolas中的“H”高。这是一个字体设计问题。

解决方案是使用匹配的字体。如果你真的想使用Verdana复制文本，Lucida控制台可能是等宽字体的最佳选择。如果您想使用Consolas作为等宽字体(很好！)，那么使用另一个“C字体”来复制文本，例如Cambria (serif字体)或Calibri或Candara (sans-serif字体)。

尽管这里的字体大小(在我测试的浏览器上)是相同的，但最好确保字体大小，因为浏览器通常在code和pre以及其他一些元素上应用类似font-size: 90%的内容。发生这种情况的条件有点模糊，显式地将字体系列设置为通用monospace之外的其他字体似乎会阻止现代浏览器出现这种情况。但这仍然是一个有用的预防措施

pre, code, samp, kbd, tt { font-size: 100%; }