CODEWITHSUNDEEP
cssfontswebkit
JoJo
JoJo

Reputation: 20115

Courier font is tiny in Webkit browsers

I noticed that in Chrome and Safari, my Courier text is tiny. In Internet Explorer and Firefox, the Courier text is comparable in size to the rest of my text. Is there something wrong with my 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;
}

Upvotes: 0

Views: 767

Answers (2)

bobince
bobince

Reputation: 536615

Yeah, WebKit has separate default font size preferences for normal and monospaced fonts. When you use a font size derived from a relative font size (ie none of the text's ancestor elements have an absolute font size), you get different sizes for monospaced and normal fonts.

(This wouldn't necessarily be a bad thing, except that the default preference of much smaller monospaced fonts isn't really sensible and most users won't have changed it.)

I think this has changed over different versions; originally IIRC the different base font size for monospaced fonts was applied to any element whose font-family list had monospace in it. Now this behaviour only seems to happen when the font-family property is set to exactly monospace. Your example of courier, monospace doesn't trigger it for me; weirdly, neither does it happen with monospace, sans-serif, even though then the font will always be monospace and sans-serif will never be used. This behaviour matches Firefox.

Upvotes: 1

Gregg B
Gregg B

Reputation: 13727

You're probably not defining a font-size anywhere, so it's falling back to browser default.

Upvotes: 1

Related Questions