css - Courier 字体在 Webkit 浏览器中很小

Question

我注意到在 Chrome 和 Safari 中，我的 Courier 文本很小。在 Internet Explorer 和 Firefox 中，Courier 文本的大小与我的其余文本相当。我的 CSS 有问题吗？

#article pre,
#article code {
    display: block;
    font-family: courier, monospace;
    background: #f7f7f7;
    padding: 0.6em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ddd;
    margin: 0 0 1em 0;
}

Answer 1

是的，WebKit 对普通字体和等宽字体有单独的默认字体大小首选项。当您使用从相对字体大小派生的字体大小时(即文本的所有祖先元素都没有绝对字体大小)，等宽字体和普通字体会得到不同的大小。

(这不一定是坏事，除了较小的等宽字体的默认首选项并不是真正明智的并且大多数用户不会更改它。)

我认为这在不同的版本中已经发生了变化；最初 IIRC 等宽字体的不同基本字体大小适用于 font-family 列表中包含 monospace 的任何元素。现在，这种行为似乎只有在 font-family 属性设置为 exactly monospace 时才会发生。您的 courier, monospace 示例不会为我触发它；奇怪的是，monospace, sans-serif 也不会发生这种情况，即使字体将始终为 monospace 而 sans-serif 永远不会用过的。此行为与 Firefox 匹配。