117 lines
4.5 KiB
Markdown
117 lines
4.5 KiB
Markdown
---
|
||
title: Fonts
|
||
localeTitle: Шрифты
|
||
---
|
||
## Шрифты
|
||
|
||
Свойства шрифта CSS определяют семейство шрифтов, вес, размер, вариант, высоту строки и стиль текста.
|
||
|
||
### Семейство шрифтов
|
||
|
||
Семейство шрифтов текста просто устанавливается с использованием свойства `font-family` .
|
||
|
||
Он работает с _резервной_ системой, если ваш браузер не поддерживает первый шрифт, он пытается со следующим и так далее. Если имя шрифта более одного слова, оно должно быть окружено кавычками.
|
||
|
||
```css
|
||
p {
|
||
font-family: "Times New Roman", Times, serif;
|
||
}
|
||
```
|
||
|
||
В приведенном выше примере «Times New Roman» является шрифта, а «serif» - это , В качестве резервной копии используются общие имена механизм сохранения стиля, если фамилия недоступна. Общее имя всегда должно быть последним элементом в списке имен семейств шрифтов. общий фамилии - засечка, без засечек, моноширины, скоропись, фэнтези, система-ui.
|
||
|
||
### Стиль шрифта
|
||
|
||
Свойство `font-style` можно использовать для указания курсивного текста.
|
||
|
||
Это свойство имеет 3 значения:
|
||
|
||
* normal - текст отображается нормально
|
||
* курсив - текст, _выделенный курсивом_
|
||
* наклонный - текст показан наклонным
|
||
|
||
```css
|
||
.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` - известные как абсолютные величины
|
||
* `%` - проценты
|
||
|
||
```css
|
||
.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` .
|
||
|
||
```css
|
||
p {
|
||
font-weight: bold
|
||
}
|
||
```
|
||
|
||
Для отптимизации CSS используют вариант сокращенной записи
|
||
|
||
```css
|
||
font: italic small-caps lighter 14px Georgia, serif;
|
||
```
|
||
|
||
### Отзывчивость шрифта
|
||
|
||
Размер текста можно установить с помощью блока vw (ширина видового экрана). Таким образом, размер текста будет соответствовать размеру окна браузера.
|
||
|
||
```html
|
||
<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` указывает, должен ли текст отображаться в шрифте с малыми шапками (где все строчные буквы преобразуются в прописные буквы, причем они отображаются в меньшем размере шрифта, чем оригинальные заглавные буквы в тексте).
|
||
|
||
```css
|
||
p.small {
|
||
font-variant: small-caps;
|
||
}
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [Школы W3 - Шрифт CSS](https://www.w3schools.com/css/css_font.asp)
|
||
* [MND - CSS-шрифт](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
|
||
* [CSSFontStack](https://www.cssfontstack.com/)
|