Размер шрифта и наследование

Хотя свойство font-size является в CSS наследуемым, наследуются вычисленные значения, а не процентные. Таким образом, элемент strong наследует значение font-size, равное 12px, и в соответствии с объявленным значением 135% размер шрифта составляет 16.2px (что, вероятно, будет округлено до 16px). Для абзаца сноски процентное значение вычисляется относительно значения font-size, унаследованного от элемента body и равного 15px. Вычислив 75% от этого значения, получаем 11.25px. Как и ключевые слова, задающие относительные размеры, процентные значения относятся к накопительным. Таким образом, следующая разметка отображается:
-
p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}

This paragraph contains bothemphasis and strong
emphasis
, both of which are larger than the paragraph text.


12px 14.4px 19.44px 12px



Значение размера элемента strong, вычисляется следующим образом:

12 px x 120% = 14.4px
14.4px x 135% = 19.44px (возможно округление до 19px)

Однако существует альтернативный сценарий, в котором окончательное значение несколько иное.


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

12px × 120% = 14.4px [14.4px ≈ 14px]
14px × 135% = 18.9px [18.9px ≈ 19px]

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

ul {font-size: 80%;}

На четвертом уровне вложенности вычисленное значение font-size ненумерованного списка составляло бы 40,96% размера шрифта предка самого верхнего уровня.


Размер шрифта каждого вложенного списка составлял бы 80% размера шрифта его родительского списка, что все более и более затрудняло бы чтение каждого последующего уровня. Аналогичная проблема может возникнуть, если для верстки документа применяются вложенные таблицы. Тогда можно было бы написать такое правило:

td {font-size: 0.8em;}

В любом случае, скорее всего, получится страница, практически непригодная для чтения.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные размеры
Варианты шрифтов
Загрузка шрифтов
Задание семейства шрифтов
Интеллектуальное сопоставление шрифтов

Вернуться в раздел: CSS / 5. Шрифт