Шрифт 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

Возможно, вы нигде не определяете размер шрифта, поэтому он возвращается к настройкам браузера по умолчанию.