3

我正在编写一个网页，我想将一种字体用于普通文本，另一种用于代码，所以我有以下 CSS：

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

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

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

这是所涉及的特定字体的怪癖，还是我做错了什么？

4

4 回答 4

4

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

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

于 2012-05-04T13:56:59.607 回答
2

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

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

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

于 2012-05-04T14:12:40.253 回答
1

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

解决方案是使用匹配的字体。如果您真的想使用 Verdana 来复制文本，Lucida Console 可能是等宽字体的最佳选择。如果您想将 Consolas 用作等宽字体（很好！），然后使用另一种“C 字体”来复制文本，例如 Cambria（衬线字体）或 Calibri 或 Candara（无衬线字体）。

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

pre, code, samp, kbd, tt { font-size: 100%; }
于 2012-05-04T16:59:12.837 回答
0

字体

第一行是 Verdana，第二行是 Consolas。两个12pt。Consolas 稍短一些，但相差不到 20%。检查 pre 的父元素，因为 em 字体大小是累积的 - 例如，如果 body 是 0.9em 而 pre 是 0.9em，结果将是 12pt * 0.9 * 0.9 = 9.72pt

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

编辑

看起来你没有做错 =) 左边来自提琴手，右边来自写字板

在此处输入图像描述

于 2012-05-04T13:51:57.623 回答