Процентные значения и размеры

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

body {font-size: 15px;}
p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}
small, .fnote {font-size: 75%;}

This paragraph contains both emphasis and strong
emphasis
, both of which are larger than their parent element.
The small text, on the other hand, is smaller by a quarter.


This is a 'footnote' and is smaller than regular text.



12px 14.4px 12px 16.2px 12px
9px 12px


10.5px




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


Для других значений свойства font-size веб-броузер, возможно (а возможно, и нет), сохранит дробные части. Кстати, CSS определяет значение длины em как процентное в том смысле, что при задании размеров шрифтов значение 1em эквивалентно 100%. Таким образом, следующие правилаформируют идентичные результаты (при условии, что родительский элемент обоих абзацев один
и тот же):

p.one {font-size: 166%;}
p.two {font-size: 1.6em;}

Для единиц измерения длины em действуют те же принципы, что и при работе с процентными значениями, такие как наследование вычисленных размеров и т. д.

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

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

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