4.5 KiB
title | localeTitle |
---|---|
Fonts | Шрифты |
Шрифты
Свойства шрифта CSS определяют семейство шрифтов, вес, размер, вариант, высоту строки и стиль текста.
Семейство шрифтов
Семейство шрифтов текста просто устанавливается с использованием свойства font-family
.
Он работает с резервной системой, если ваш браузер не поддерживает первый шрифт, он пытается со следующим и так далее. Если имя шрифта более одного слова, оно должно быть окружено кавычками.
p {
font-family: "Times New Roman", Times, serif;
}
В приведенном выше примере «Times New Roman» является шрифта, а «serif» - это , В качестве резервной копии используются общие имена механизм сохранения стиля, если фамилия недоступна. Общее имя всегда должно быть последним элементом в списке имен семейств шрифтов. общий фамилии - засечка, без засечек, моноширины, скоропись, фэнтези, система-ui.
Стиль шрифта
Свойство font-style
можно использовать для указания курсивного текста.
Это свойство имеет 3 значения:
- normal - текст отображается нормально
- курсив - текст, выделенный курсивом
- наклонный - текст показан наклонным
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Размер шрифта
Свойство font-size
задает размер текста.
Существуют различные типы значений размера шрифта:
px
(pixels) - размер текста по умолчанию16px
em
-1em
= текущий размер шрифта, поэтому1em
=16px
(рекомендуется W3C)small
,medium
,large
- известные как абсолютные величины%
- проценты
.with-pixels {
font-size: 14px;
}
.with-ems {
font-size: 0.875em;
}
.with-absolute {
font-size: large;
}
.with-percentage {
font-size: 80%;
}
Вес шрифта
Свойство font-weight
определяет вес (или смелость) шрифта. Принимает ключевые слова ( bold
, normal
, bolder
, lighter
) или числовые ключевые слова ( 100
, 200
, 300
, 400
и т. Д.). 400
- это то же самое, что и в normal
.
p {
font-weight: bold
}
Для отптимизации CSS используют вариант сокращенной записи
font: italic small-caps lighter 14px Georgia, serif;
Отзывчивость шрифта
Размер текста можно установить с помощью блока vw (ширина видового экрана). Таким образом, размер текста будет соответствовать размеру окна браузера.
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Вариант шрифта
Свойство font-variant
указывает, должен ли текст отображаться в шрифте с малыми шапками (где все строчные буквы преобразуются в прописные буквы, причем они отображаются в меньшем размере шрифта, чем оригинальные заглавные буквы в тексте).
p.small {
font-variant: small-caps;
}