Свойства шрифта 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). Объявление семейства шрифтов может выглядеть так:
p { font-family: "Times New Roman", Times, serif; }
Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, такие как "Times New Roman", "Courier New", "Trebuchet MS" и т.д.
Стиль шрифта
Свойство font-style устанавливает стиль шрифта. Возможные значения этого свойства: нормальное (normal), курсивное (italic) или наклонное (oblique).
p.one { font-style: normal; } p.two { font-style: italic; } p.three { font-style: oblique; }
Размер шрифта
Свойство font-size устанавливает размер шрифта для текстового содержимого элемента.
Есть несколько способов указать значения размера шрифта, например, при помощи ключевых слов, пикселей (px) или em.
Установка размера шрифта с помощью ключевых слов
Установив размер шрифта при помощи ключевого слова в элементе body, вы можете установить относительный размер шрифта повсюду на странице, что дает вам возможность легко масштабировать шрифт. Абсолютный размер указывается с использованием одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large.
Относительный размер указывается с помощью одного из следующих ключевых слов: smaller, larger.
body { font-size: large; } h1 { font-size: larger; } p { font-size: smaller; }
Однако этот способ не рекомендуется использовать. Давайте рассмотрим как можно установить размер шрифта при помощи px и em.
Установка размера шрифта в пикселях
Установка размера шрифта в пикселях (например, 12px, 16px и т.д.) является приоритетным, когда вам нужна точность до пикселей. Тем не менее, результаты могут варьироваться в разных браузерах, так как они используют разные алгоритмы для достижения аналогичного эффекта.
h1 { font-size: 24px; } p { font-size: 14px; }
Заданные в пикселях размеры шрифта не позволяют пользователям менять их размер в настройках браузера. Например, пользователи с нарушением зрения могут захотеть установить размер шрифта больше указанного вами размера. Поэтому вам следует избегать использования значений в пикселях для размеров шрифта, если вы хотите создать дизайн который будет одинаково удобен для всех.
Установка размера шрифта с помощью Em
Единица em относится к размеру шрифта родительского элемента.
Размер значения em является динамическим. При определении свойства font-size, em равно размеру шрифта, который применяется к родительскому элементу.
Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px.
Если вы нигде не указали размер шрифта на странице, то будет использоваться размер, который установлен в браузере по умолчанию, обычно он составляет 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.
h1 { font-size: 2em; /* 32px/16px=2em */ } p { font-size: 0.875em; /* 14px/16px=0.875em */ }
Толщина шрифта (weight)
Свойство font-weight указывает толщину или жирность шрифта.
Возможные значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.
p { font-weight: bold; }
Большинство шрифтов доступны только в обычном и жирном шрифте. Если шрифт недоступен в указанной толщине, будет выбран альтернативный.
Оставить комментарий