Блог

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

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 .)

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

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

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

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

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

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

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

Потому что разработчики Firefox ошиблись в том, как они закодировали «моноширинный». Чтобы заставить «моноширинный» правильно работать в Firefox, вам нужно ввести «моноширинный;», а не «моноширинный;».

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

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

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