Размер шрифта - CSS-хитрости

Содержание:

Anonim

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+ Работает Работает