font-size
Свойство определяет размер или высоту шрифта. font-size
влияет не только на шрифт, к которому он применяется, но также используется для вычисления значений единиц длины em, rem и ex.
p ( font-size: 20px; )
font-size
может принимать в качестве значений ключевые слова, единицы длины или проценты. Однако важно отметить, что когда он объявлен как часть font
сокращенного свойства, font-size
это обязательное значение. Если его нет в сокращении, вся строка игнорируется.
Применяемые значения длины (например, px, em, rem, ex и т.д.) не font-size
могут быть отрицательными.
Абсолютные ключевые слова и ценности
.element ( font-size: small; )
Он принимает следующие абсолютные значения ключевых слов:
xx-small
x-small
small
medium
large
x-large
xx-large
Эти абсолютные значения сопоставляются с определенными размерами шрифта, вычисленными браузером. Но вы также можете использовать два значения ключевых слов, которые зависят от размера шрифта родительского элемента.
Другие абсолютные значения включают mm
(миллиметры), cm
(сантиметры), in
(дюймы), pt
(точки) и pc
(пика). Один пункт равен 1/72 дюйма, а один пик равен 12 пунктам - эти значения обычно используются для печатных документов.
Относительные ключевые слова
.element ( font-size: larger; )
larger
smaller
Например, если у родительского элемента размер шрифта равен small
, дочерний элемент с определенным относительным размером larger
сделает размер шрифта равным medium
для дочернего элемента.
Значения в процентах
.element ( font-size: 110%; )
Значения в процентах, такие как установка размера шрифта 110%, также относятся к размеру шрифта родительского элемента, как показано в демонстрации ниже:
См. Pen qdbELL от CSS-Tricks (@ css-tricks) на CodePen.
Ем-блок
.element ( font-size: 2em; )
Единица em - это относительная единица, основанная на вычисленном значении размера шрифта родительского элемента. Это означает, что дочерние элементы всегда зависят от своих родителей, чтобы установить размер шрифта. Например:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )
В приведенном выше примере размер шрифта абзаца будет 16 пикселей, потому что 1 x 16 = 16 пикселей, тогда как заголовок будет 32 пикселей, потому что 2 x 16 = 32 пикселей. Увеличение размера шрифта дает много преимуществ в зависимости от размера шрифта родительского элемента, а именно: мы можем заключать элементы в контейнер и знать, что все дочерние элементы всегда будут относиться друг к другу:
См. «Перо», выясняющее, как работает модуль em с помощью CSS-Tricks (@ css-tricks) на CodePen.
Единица rem
Однако в случае единиц rem размер шрифта зависит от значения корневого элемента (или html
элемента).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )
В приведенном выше примере единица rem равна 16px (поскольку она унаследована от html
корневого элемента /), и поэтому размер шрифта для всех элементов абзаца будет равен 24px (1,5 x 16 = 24). В отличие от единиц em, абзац игнорирует стиль всех своих родителей, кроме корня.
Это устройство поддерживается следующими браузерами:
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Работает | Работает | Работает | Работает | 10+ | Работает | Работает |
Бывший блок
.element ( font-size: 20ex; )
Для единиц ex 1ex будет равно вычисленной высоте строчной буквы x корневого элемента. Итак, в приведенном ниже примере для html
элемента установлено значение, 20px
а все остальные размеры шрифта определяются высотой x этого конкретного шрифта.
См. «Перо», выясняя, как работает модуль ex, с помощью CSS-Tricks (@ css-tricks) на CodePen.
Поэкспериментируйте с демонстрацией выше, когда я заменил элемент font-family
на html
элементе, чтобы увидеть, как меняются другие размеры шрифта.
Единицы просмотра
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )
Единицы области просмотра, такие как vw
и vh
, устанавливают размер шрифта элемента относительно размеров области просмотра:
- 1vw = 1% ширины области просмотра
- 1vh = 1% высоты области просмотра
Итак, если мы возьмем следующий пример:
.element ( font-size: 100vh; )
Затем будет указано, что размер шрифта элемента всегда должен составлять 100% высоты области просмотра (50vh будет 50%, 15vh будет 15% и так далее). В демонстрации ниже попробуйте изменить высоту примера, чтобы посмотреть, как растягивается шрифт:
См. Тип Pen Sizing с единицами vh от CSS-Tricks (@ css-tricks) на CodePen.
vw
единицы отличаются тем, что он устанавливает высоту букв по ширине области просмотра, поэтому в приведенной ниже демонстрации вам нужно будет изменить размер окна браузера по горизонтали, чтобы увидеть эти изменения:
См. Тип Pen Sizing с единицами vw от CSS-Tricks (@ css-tricks) на CodePen.
Эти устройства поддерживаются следующими браузерами:
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Важно отметить, что есть еще две единицы области просмотра: vmin
и vmax
. Первый найдет значения vh
и vw
и установит размер шрифта как наименьшее из двух, в то время как vmax
установит размер шрифта на наибольшее из этих двух значений.
Блок ch
.element ( font-size: 24ch; )
ch
Блок аналогичен ex
блоку в том , что он будет установить размер шрифта элемента по отношению к ширине 0 (ноль) глифа шрифта:
См. Тип Pen Sizing с блоками ch от CSS-Tricks (@ css-tricks) на CodePen.
Это устройство поддерживается:
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
27+ | Работает | 10+ | Работает | 9+ | Работает | Работает |