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

Я обнаружил несоответствие между браузерами в обработке размера шрифта (в Mac OS X 10.11.4). Я хотел бы знать, является ли это ошибкой в ​​Firefox, или ошибкой в ​​CSS, или я что-то не понимаю в CSS?

Этот JSFiddle показывает детали. В таком разделе:

<pre>Start of pre section
  <code>**problem here!**</code>
End of pre section
</pre>

стиль code { font-family: Courier; } изменяет размер шрифта, отображаемый в Safari и Chrome, но не в Firefox. Тем не менее в других разделах code размер элемента увеличивается с 13 до 16 пикселей во всех браузерах.

Почему размер шрифта увеличивается с 13 до 16 пикселей после установки font-family во всех браузерах?

Возможно, Firefox меняет font-familyно неfont-size, Тем не менее, он меняет размер шрифта в других местах, например, в codeвнутриp элемент или внутри списка.

Я предполагаю, что решение состоит в том, чтобы просто агрессивно устанавливать явный размер шрифта с пиксельными единицами, где бы я ни заботился об этом (игнорируя доступность).


Цитата из возможной связанной ошибки Firefox 2006 года: Ошибка 328621 - странное значение по умолчаниюmonospace размер шрифта - отличается от пропорциональных шрифтов

Хотя проблема переносимости между браузерами это не кажется мне тривиальной. В прошлый раз, когда я хотел разметить HTML так, чтобы моноширинные части показывали то же самое в Mozilla и M$IE, мне пришлось прибегнуть к абсолютным размерам шрифтов, которых, безусловно, следует избегать из-за проблем с доступностью, которые они навязывают.

И да, есть простой обходной путь - изменение настроек. Но большинство пользователей будут использовать значения по умолчанию.:-(

5 ответов

Решение

Эта проблема не нова; Уже много лет известно, что браузерная обработка моноширинных шрифтов невероятно сложна и противоречива во всех браузерах. Доступен ряд обходных путей, которые не требуют переопределения предпочтения моноширинного шрифта, установленного пользователем, наиболее сложным из которых является указание

font-family: monospace, monospace;

Это верно: два monospace ключевые слова в конце стека шрифтов. Никто не знает, почему это работает; это просто так.

Что бы это ни стоило, таблица стилей Firefox в UA содержит ссылки на -moz-fixed ключевое слово, которое относится к предпочтению, установленному пользователем, которое включает как семью, так и размер, несмотря на то, что оно является значением для font-family имущество. Firefox поставляется с предпочтением, равным 13px, в зависимости от того, какой системный шрифт по умолчанию установлен. Казалось бы, что monospace, monospace вынуждает браузер вычислять размер шрифта элемента в соответствии со спецификацией, сохраняя, по крайней мере, предпочтительное семейство моноширинных объектов. Но это всего лишь предположение.

Это ошибка? Это зависит от того, кого вы спрашиваете. Если вы спросите поставщиков браузеров, они, вероятно, скажут, что это намеренно. Если вы спросите других авторов, они, вероятно, также назовут это ошибкой. Это нарушение спецификации? Нет, потому что спецификация позволяет браузерам реализовывать значения по умолчанию так, как им нравится.

Так как я задал вопрос и получил пару добросовестных ответов, которые, однако, на самом деле не отвечают на мой вопрос: я попытаюсь доказать, что это действительно проблема с нынешними браузерами. Смотрите мой комментарий в конце о том, почему это может или не может иметь значение.

Вот тогда

3 проблемы с размером шрифта в CSS/HTML в FireFox, Chrome и Safari в Mac OS X 10.11.4:

Проблема 1. Изменение семейства шрифтов не должно изменять размер шрифта, но иногда это происходит.

Я не знаю, что такое "таблица стилей агента пользователя". Там могут быть все виды настроек на нем. Но независимо от этих настроек, изменение font-family не должен меняться вычисляется font-size, (Некоторые шрифты могут казаться больше при одном и том же размере шрифта по сравнению с другими шрифтами с тем же размером шрифта, поэтому визуально они могут выглядеть больше или меньше, но вычисленный номер размера шрифта не должен изменяться).

запись: в следующем

pre(code) means roughly <pre><code>text here</code></pre>
p(code) means roughly <p><code>text here</code></p>

В ситуации по умолчанию на странице без стилей я вижу это во всех 3 браузерах:

pre=13px
pre(code)=13px
p=16px
p(code)=13px

<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>

Возможно, таблица стилей агента пользователя выглядит примерно так:

pre { font-size: 13px }
code { font-size: 13px }
p { font-size: 16px }

Пользовательский агент не может использовать относительные размеры для code потому что это выглядит как 13px внутри обоих pre а также p элементы. Так может быть так:

pre { font-size: 81.25% }
code { font-size: 13px }
p { font-size: 100% }

или эквивалентное использование em вместо процентов. Или, может быть, потомственное правило с процентами или em:

pre { font-size: 81.25% }
pre code { font-size: 100% }
p { font-size: 100% }
p code { font-size: 81.25% }

Но тогда как мы можем это объяснить:

После настройки code { font-family: Courier } (или любое семейство шрифтов, кроме monospace) мы получаем:

pre=13px
pre(code)=16px for Chrome & Safari    pre(code)=13px for FireFox
p=16px
p(code)=16px

code { font-family: "Courier"; }
<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>

Неважно, что такое таблица стилей, font-size не должен меняться только после изменения font-family,

Задача 2. Относительная font-size должен быть основан на вычислении родительского элемента font-size, Но иногда это не так.

Без стилей мы имеем:

p=16px
p(code)=13px

После настройки code { font-size: 100%; } мы должны иметь

p=16px
p(code)=16px

Вместо этого у нас все еще есть:

p=16px
p(code)=13px

Это неправильно, потому что авторский стиль должен переопределять стиль пользовательского агента (браузера) по умолчанию. И относительный (в процентах) размер шрифта основан на вычисленном размере шрифта родительского элемента.

code { font-size: 100%; }
<p>paragraph <code>p(code)</code></p>

Аналогично, после настройки code { font-size: 120%; } мы должны иметь

p=16px
p(code)=19.2px = 16px * 1.2

Вместо этого мы имеем:

p=16px
p(code)=15.6px = 13px * 1.2

code { font-size: 120%; }
<p>paragraph <code>p(code)</code></p>

Это показывает, что родительский элемент игнорируется, и что некоторое фантомное значение 13px используется для вычисления относительного font-size,

Задача 3. Стандартный совет по использованию html { font-size: 62.5% } а затем использовать em или же rem для размера шрифта не работает правильно

(Примечание: FireFox с rem кажется правильным)

(Примечание: использование также рекомендуется body { font-size: 62.5% } казалось, дал некоторые сумасшедшие результаты, такие как удвоение размеров шрифта, поэтому я не рассматриваю это здесь.)

С html { font-size: 62.5%; } а также code { font-size: 1.6em; } у нас есть:

p=10px
FireFox: p(code)=13.0167px
Chrome: p(code)=13px
Safari: p(code)=13px

Все они должны быть 16px = 1.6 * 10px

body { font-size: 62.5%; } 
code { font-size: 1.6em; }
<p>paragraph <code>p(code)</code></p>

С html { font-size: 62.5%; } а также code { font-size: 1.6rem; } у нас есть:

p=10px
FireFox: p(code)=16px
Chrome: p(code)=13px
Safari: p(code)=13px

FireFox - единственный браузер, который получает это прямо здесь.

html { font-size: 62.5%; } 
code { font-size: 1.6rem; }
<p>paragraph <code>p(code)</code></p>

Я подозреваю, что все это не имеет большого значения, потому что люди привыкли шлепать стили размера шрифта повсюду в их CSS.

Из моего прочтения была предпринята попытка сделать веб-страницы более отзывчивыми к собственным настройкам на каждом устройстве: адаптироваться к различным аппаратным средствам с большим или меньшим количеством пикселей на дюйм (PPI); позволить пользователям с ограниченным зрением запрашивать более крупный текст, чтобы они могли легче читать; и т.п.

Существуют различные рекомендации и споры о том, как лучше всего это сделать: укажите размер шрифта с помощью html { font-size: 62.5% } и использовать em или же rem везде кажется популярным мнение. В последнее время просто используя старый добрый px указать размер шрифта возвращается в стиле, с мыслью, что px не определяет фактические пиксели экрана, а скорее идеализированный 96 dpi для зрителя (который может переводиться в другое количество пикселей) и позволяет элементам управления масштабированием браузера обрабатывать желаемые пользователем изменения размера шрифта.

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

Мне кажется, что единственный способ получить согласованный размер шрифта - использовать пиксели: px, Например, px в Root, rem для компонентов, em для текстовых элементов. Или просто используйте пиксели везде.

Mozilla пишет следующее о доступности и размере шрифта

Определение размеров шрифта в пикселях недоступно, поскольку пользователь не может изменить размер шрифта из браузера. (Например, пользователи с ограниченным зрением могут захотеть установить размер шрифта намного больший, чем размер, выбранный веб-дизайнером.) Поэтому избегайте использования пикселей для размеров шрифта, если вы хотите создать инклюзивный дизайн.

Но со всеми этими ошибками с унаследованным и относительным размером шрифта это не похоже на возможность избежать использования пикселей. Плюс спор об эталонном пикселе и использовании в браузере элемента управления масштабированием, кажется, решает проблему доступности.

Почему размер шрифта увеличивается с 13 до 16 пикселей после установки семейства шрифтов во всех браузерах?

вероятно, потому что таблица стилей браузера по умолчанию имеет эти настройки.

Я предполагаю, что решение состоит в том, чтобы не пытаться понять все это, а просто агрессивно устанавливать шрифт и размер шрифта, где бы я ни заботился об этом.

Не уверен, что вы подразумеваете под "агрессивным", но да: если у вас есть особый спрос на этот стиль, установите его как можно точнее в своей собственной таблице стилей, включая семейство шрифтов, вес, размер и т. Д.

Это потому, что в темные времена один разработчик Netscape решил навязать свои личные предпочтения всем остальным в настройках браузера (большинство программистов - это молодые люди, которые думают, что разумно убивать глаза, устанавливая размер текста на один или два размера меньше, чем у всех остальных). они думают, что "моноспейс" принадлежит им и "без засечек" нормальным людям).

Таким образом, Firefox поставляется с настройками по умолчанию, в которых псевдоним "monospace" имеет меньший размер шрифта, чем "sans serif". В значительной степени разрушает согласованные наборы шрифтов (где моноширинный шрифт выглядит так же, как шрифт с засечками или без засечек).

Вы можете "исправить" это локально, запустив about: config и изменив все свойства font.size.fixed. * На то же значение, что и свойства font.size.variable. *. Но так как вы не можете исправить все Firefox в дикой природе, это делает псевдоним monospace css бесполезным для этого браузера.

Ответ от owler перешел от вопроса к ответу:


Ответ от BoltClock был очень полезным. На странице, на которую он / она ссылается на информацию об измерении фиксированного объема в монокосмическом пространстве Эрика Мейера, содержится тщательный анализ и некоторые решения. Он объясняет некоторые механизмы браузера, связанные с использованием пользовательских шрифтов, что объясняет некоторые из таинственных действий, которые я наблюдал (например, почему code элемент, казалось бы, унаследовал размер 13px, когда он был потомком p элемент размером 16px: причина в том, что он на самом деле наследует размер medium что заставляет браузер использовать настройки браузера / пользователя по умолчанию).

Для моей ситуации я нахожу, что могу удалить html { font-size: 16px; } стиль и вместо этого добавить следующее:

pre { font-family: monospace, monospace; }
code { font-family: monospace, monospace; font-size: 100%; }

Это дает мне согласованное относительное изменение размера шрифта, но все же позволяет пользователю устанавливать размер шрифта по умолчанию. Эрик Мейер рекомендует использовать monospace, serif но я нахожу это monospace, monospace работает, и я думаю, что это имеет немного больше смысла, когда вы видите это в таблице стилей (это странно, но выглядит, вероятно, преднамеренно, и это означает, что вы действительно, действительно хотите моноширинный).

Я думаю, что основная проблема заключается в том, что браузеры имеют разные значения шрифта по умолчанию / предпочтения для моноширинного шрифта, чем для других шрифтов. Основная идея "доступного адаптивного дизайна" в отношении размера шрифта состоит в том, чтобы позволить пользователю контролировать размер шрифта. Но когда у нас есть несколько настроек размера шрифта (serif, sans-serif, monospace), тогда это слишком много вариантов для пользователя. Пользователь просто хочет больше текста, который он может прочитать. Но для автора: они просто хотят, чтобы относительные размеры шрифтов были правильными при любом заданном размере.

В случае, если это полезно для кого-то еще, вот несколько примеров (в стиле Эрика Мейера), показывающих, что monospace, monospace исправляет некоторые проблемы, о которых я писал в своем ответе ниже.

code:before {
    content: attr(style); 
    border-bottom: 1px solid #AAA; 
    color: #575; margin-right: 0.5em;
}
p {
    margin-bottom: 2em;
}
<p>This is a 'p' element with a <code>'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-size: 100%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 100%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 120%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 120%">'code' element</code> contained within.</p>

Я столкнулся с аналогичной проблемой, когда я использовал моноширинный режим, а размеры были разными в Google Chrome, Edge и Mozilla Firefox. Это связано с тем, что разные браузеры имеют разный вес и размер стандартных шрифтов. Чтобы решить эту проблему, я использовал шрифты Google, и тогда размеры шрифтов были одинаковыми во всех браузерах.

Другие вопросы по тегам