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高度比Verdana小。您可以通过使用更大的字体大小来“修复它”，但如果用户没有Consolas，页面将回退到默认的等宽字体，这将显得太大。

正确的解决方案在于CSS3的font-size-adjust。唉，它根本得不到很好的支持;据我所知，只有主流浏览器支持它才是Firefox。

Answer 2

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

em square得名，因为在金属印刷时代，每个字母都放在自己的金属“盒子”中，而在传统字体中，大写拉丁文M通常填充整个盒子的宽度，定义尺寸为整个家庭。因此，em盒子。虽然原始em框是由M的宽度定义的，但是em单元本身是指字符的最大允许高度。这只是为大写M创建的框的结果。

简而言之，字体系列中的所有字母都需要放在em框内，但它们不必占用整个内容。因此，当您设置具有给定宽度的em框时，您所做的就是定义要放置的字体的最大允许空间。从那里，字体设计师在字距调整，几何，比率等方面的选择将决定如何很多那个盒子都会占用他们的刻字。这就是为什么你必须使用两种不同的字体大小来使字母看起来是相同的。

Answer 3

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

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

虽然这里的字体大小相同（在我测试的浏览器上），但最好确保它，因为浏览器经常在font-size: 90%和{{1}上应用code之类的内容和其他一些元素。发生这种情况的条件有点模糊，并且明确地将字体系列设置为除通用pre之外的其他内容似乎在现代浏览器上阻止了这种情况。但它仍然是设置

的有用预防措施

monospace

Answer 4

第一行是Verdana，第二行是Consolas。两个12pt。 Consolas略短，但差别不大于20％。检查你的pre的父元素，因为em字体大小是累积的 - 例如如果body是0.9em而pre是0.9em，那么结果将是12pt * 0.9 * 0.9 = 9.72pt

如果你试图只匹配高度而忽略宽度，那么1.16em看起来是正确的，这实际上是字体的怪癖，你没有做错任何事。

修改

看起来你没有做错任何事情=）左边是来自fiddler，右边是来自写字板