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属性恰好设置为monospace时才会发生。您的courier, monospace示例并没有为我触发它；奇怪的是，monospace, sans-serif也没有触发它，即使字体始终是monospace，sans-serif也永远不会被使用。这种行为与Firefox相匹配。

Answer 2

您可能没有在任何地方定义字体大小，因此它将回退到浏览器默认大小。