Как указать размер шрифта в css

Свойство font-size

Свойство font-size устанавливает размер шрифта текста. Значением свойства служат любые единицы для размеров (как правило, это px, em или rem) либо специальные ключевые слова (используются крайне редко).

Синтаксис

Значения в виде ключевых слов

Значение Описание
xx-small Самый самый маленький. Пример: Lorem ipsum dolor sit amet .
x-small Самый маленький. Пример: Lorem ipsum dolor sit amet .
small Маленький. Пример: Lorem ipsum dolor sit amet .
medium Средний. Пример: Lorem ipsum dolor sit amet .
large Большой. Пример: Lorem ipsum dolor sit amet .
x-large Очень большой. Пример: Lorem ipsum dolor sit amet .
xx-large Самый большой. Пример: Lorem ipsum dolor sit amet .
larger Больше шрифта родителя на некоторое значение.
smaller Меньше шрифта родителя на некоторое значение.

Значение по умолчанию: medium .

Пример

Давайте установим абзацам размер шрифта в 20px :

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — 150% . В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px:

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — 150% . В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px:

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — larger. В этом случае размер шрифта для span будет больше, чем у его родителя (абзаца):

Пример

Обратите внимание на то, что шрифты с разным font-family и одинаковым font-size визуально могут быть совсем не одного размера (для решения данной проблемы смотрите свойство font-size-adjust ).

В примере ниже обоим абзацам задан font-size в 16px , но разные font-family :

Шрифты CSS

Шрифты CSS

Свойства шрифта CSS позволяют вам устанавливать различные стили для шрифтов, такие как семейство шрифтов, размер и жирность, вариант и т.д.

Свойства шрифта

CSS предоставляет несколько свойств для стилизации шрифтов, таких как: font-family, font-style, font-option, font-weight и font-size. В следующем разделе описывается каждое из этих свойств.

Семейство шрифтов (font-family)

Свойство CSS font-family позволяет вам установить приоритетный список имени семейства шрифтов для текстового содержимого выбранного элемента.

Свойство font-family может содержать несколько имен шрифтов в качестве резерва. Сначала идет название приоритетного шрифта, а затем любые шрифты, которые могли бы заменить первый, если он недоступен. Вы должны закончить список общим семейством шрифтов: с засечками (serif), без засечек (sans-serif), моноширинный (monospace), курсивный (cursive) и фэнтезийный (fantasy). Объявление семейства шрифтов может выглядеть так:

Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, такие как "Times New Roman", "Courier New", "Trebuchet MS" и т.д.

Стиль шрифта

Свойство font-style устанавливает стиль шрифта. Возможные значения этого свойства: нормальное (normal), курсивное (italic) или наклонное (oblique).

Размер шрифта

Свойство font-size устанавливает размер шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, при помощи ключевых слов, пикселей (px) или em.

Установка размера шрифта с помощью ключевых слов

Установив размер шрифта при помощи ключевого слова в элементе body, вы можете установить относительный размер шрифта повсюду на странице, что дает вам возможность легко масштабировать шрифт. Абсолютный размер указывается с использованием одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large.

Относительный размер указывается с помощью одного из следующих ключевых слов: smaller, larger.

Однако этот способ не рекомендуется использовать. Давайте рассмотрим как можно установить размер шрифта при помощи px и em.

Установка размера шрифта в пикселях

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

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

Установка размера шрифта с помощью Em

Единица em относится к размеру шрифта родительского элемента.

Размер значения em является динамическим. При определении свойства font-size, em равно размеру шрифта, который применяется к родительскому элементу.

Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px.

Если вы нигде не указали размер шрифта на странице, то будет использоваться размер, который установлен в браузере по умолчанию, обычно он составляет 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.

Толщина шрифта (weight)

Свойство font-weight указывает толщину или жирность шрифта.

Возможные значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.

Большинство шрифтов доступны только в обычном и жирном шрифте. Если шрифт недоступен в указанной толщине, будет выбран альтернативный.

HTML\CSS → Как правильно задавать размер и тип шрифтов

Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы «M» в данном шрифте. Также размер шрифта можно задавать с помощью ключевых слов: small , large и т.д., но их обычно не используют.

Свойство font-family — задает тип (семейство) шрифта. Можно задавать конкретное название шрифта: "Times New Roman" . А можно задавать желаемый тип шрифта, например:

serif — шрифт с засечками;
sans-serif — шрифт без засечек.

Обычно в качестве значения свойства задают список шрифтов, перечисляя их через запятую. В начале списка располагают самый редкий шрифт, затем похожий, но более распространенный, а в самом конце списка — желаемый тип шрифта.

Свойство font-weight задает жирность текста. Обычно принимает одно из двух свойств: normal или bold , но есть и другие: bold, bolder, lighter, normal, 100, 200, 300 и т.д. Свойство font-style задает начертание (обычное или курсив).

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.

Регистр символов можно задать через свойство text-transform со значениями: lowercase, uppercase, capitalize, none.

Свойство line-height управляет высотой строки (межстрочным интервалом). Значение этого свойства можно задавать разными способами:

  • с помощью абсолютных единиц измерения 12px , 2em
  • множителем 1.2 , 2
  • в процентах 120%
  • ключевым словом normal , которое задает автоматический расчет высоты строки.

Предпочтительнее задавать междустрочный интервал либо множителем 1.2 , либо в относительных единицах измерения % , em .

Сокращенная запись font:

Через слэш указывается размер шрифта и междустрочное расстояние. Обычно так принято указывать в типографике. Поэтому 14px в данном случае означает размер основного текста, а 1em — междустрочный интервал. Чуть подробнее про запись font через слэш:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *