Почему некоторые размеры шрифтов не одинаковы для разных браузеров?

Question

Рассмотрим следующий пример: ( живое демо здесь )

HTML:

<div>Hello World</div>

CSS:

div {
    font-family: monospace;
    font-size: 1em;
}

JS:

$(function() {
    alert($("div").css("font-size"));
});

В Firefox размер шрифта составляет 16 пикселей, в то время как в IE8 размер шрифта составляет 13 пикселей.

Почему?

(я пытался изменить font-family на Arial, и Firefox и IE8 говорят 16px.)

Answer 1

Каждый браузер является отдельным продуктом другой компании, они программируют свой продукт по-разному, и размер шрифта является одним из них. По этой ссылке , 1 em равен текущему размеру шрифта, который может отличаться для разных браузеров, также пользователь может изменить его, я изменил размер текста на самый большой в IE, и размер шрифта теперь 21,33 пикс.

Использование em означает, что это зависит от многих вещей, используйте% age для согласованности.

1 em будет отличаться для разных браузеров (в зависимости от их настроек по умолчанию или от того, как пользователь их изменил). Например, вы сказали, что IE имеет размер шрифта 13 пикселей, а Firefox имеет 16 пикселей, когда я установил флажок, Firefox имеет 13 пикселей, а IE имеет 16 пикселей, который был изменен на 21,33 пикселей, когда я изменил размер текста на самый большой (вид -> текст размер)

Answer 2

Потому что em является относительной единицей. Em равен текущему размеру шрифта. Если размер шрифта документа 16pt, 1 em равен 16pt.

MSIE, кажется, считает, что monospace не должен быть таким большим, как Arial (в пикселях), чтобы быть читаемым. Например, 12pt Times New Roman примерно такой же, как 10pt Arial.

Если вы хотите использовать фиксированный размер шрифта, используйте font-size: 16pt.

Answer 3

Потому что это выбор реализации. Например, Firefox имеет опцию конфигурации для установки шрифта и размеров шрифта по умолчанию для Sans, Serif и Monospace.

Answer 4

Потому что создатели Firefox запутались в том, как они кодировали «моно-пространство». Для правильной работы monospace в Firefox необходимо набрать «monospace ;;» не "моноспейс".

Я не шучу. Это так просто проблемы.

Проверьте сами. Измените свой стиль CSS, чтобы иметь запятую после «моноширин» и перед точкой с запятой, и посмотрите, насколько резко он мгновенно меняет способ отображения текста.

Традиционно считалось, что вам нужно, чтобы это было типа "моно-космос, моно-космос"; работать, но они были не правы. Этот второй «моноширин» был бессмысленным, имел значение только запятая. Что на самом деле означает, что вы могли бы положить туда все, и это сработало бы. Поэтому, если вы хотите оставить в своем коде забавное пасхальное яйцо, вы можете сделать что-то вроде «monospace, hellofromthecoder»; и он работал бы совершенно нормально, если бы этот лишний текст не изменил ничего.