4.5 KiB
title, localeTitle
| 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) - размер текста по умолчанию16pxem-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;
}