111 lines
4.3 KiB
Markdown
111 lines
4.3 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
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Отзывчивость шрифта
|
|||
|
|
|
|||
|
|
Размер текста можно установить с помощью блока 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/)
|