html - 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 设置中来修复它，但这感觉像是一个 hack，特别是因为数字不是源自除反复试验之外的任何事物。

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

Answer 1

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

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