Свойства CSS, связанные со шрифтами

Articles

Эта статья объясняет свойства CSS, связанные со шрифтами.

Вы можете узнать о случаях использования и о том, как писать свойства, такие как font-style и font-family.

YouTube Video

Создание HTML для предварительного просмотра

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Типографика (Связано со шрифтами)

Свойство `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size — это CSS-свойство, используемое для указания размера текста внутри элемента. Это свойство используется для регулировки визуальной важности текста и улучшения его читаемости. font-size может задаваться с использованием различных единиц и методов.

Основные способы задания значений

Абсолютные значения(px, pt)

Если вы хотите использовать фиксированный размер, который не зависит от браузера или устройства, укажите размеры шрифта в абсолютных единицах, таких как пиксели или пункты.

1p {
2    font-size: 16px;
3}

px: Пиксели являются наиболее распространенной единицей измерения. Укажите размер с шагом в 1 пиксель.

1p {
2    font-size: 12pt;
3}

pt: Пункты — это единицы измерения, обычно используемые в печати. 1 пункт равен 1/72 дюйма.

Относительные значения(em, rem, %)

Вы также можете задавать относительные размеры шрифта на основе размера шрифта родительского или корневого элемента. Это подходит для адаптивного дизайна.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em — это относительная единица, основанная на размере шрифта родительского элемента. Если размер шрифта у родителя равен 16px, то 1em равен 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem — это относительная единица, основанная на размере шрифта корневого элемента (обычно <html> элемент).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % указывается как процент от размера шрифта родительского элемента.

Ключевые слова

Вы также можете использовать ключевые слова для простого указания удобных для пользователя размеров.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Эти ключевые слова определяют базовые размеры шрифтов, которые различаются в зависимости от браузера, но просты в использовании.

Относительные ключевые слова

Вы можете указать относительные размеры шрифта с помощью ключевых слов относительно родительского элемента или размера окружающего текста.

1p {
2    font-size: larger;
3}

larger: larger увеличивает размер шрифта по сравнению с размером шрифта родительского элемента.

1p {
2    font-size: smaller;
3}

smaller: smaller уменьшает размер шрифта по сравнению с размером шрифта родительского элемента.

Примеры общего использования

В адаптивном дизайне часто используются em и rem для указания гибких размеров шрифта в зависимости от размера родительского или корневого элементов.
В фиксированном дизайне или точном дизайне часто используется px для фиксирования размера.

Примеры настройки размеров шрифта

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Заключение

font-size — это важное свойство для настройки визуальной значимости и читаемости текста. Важно правильно использовать единицы измерения и ключевые слова в зависимости от цели дизайна или для гибкого адаптивного дизайна.

Свойство `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

Свойство font-family может задавать в основном два типа значений:.

Определенные названия шрифтов: Укажите название конкретного шрифта. Укажите шрифты, установленные в системе, или доступные как веб-шрифты.
- Пример:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Обобщенная группа шрифтов: Укажите группу запасных шрифтов, которые будут использоваться при отсутствии конкретного шрифта.
- Пример:
  - serif: С засечками (напр., Times New Roman, Georgia)
  - sans-serif: Без засечек (напр., Arial, Verdana)
  - monospace: Моноширинные (напр., Courier New, Lucida Console)
  - cursive: Курсивные (напр., Comic Sans MS)
  - fantasy: Фэнтези (например, Papyrus, Impact)

Как указать `font-family`

При указании нескольких шрифтов рекомендуется разделять их запятыми и ставить универсальный шрифт в конце на случай отсутствия первых вариантов.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

В этом случае, если Times New Roman недоступен, используется Georgia, а если ни один из них недоступен, используется шрифт типа serif.

Свойство `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight — это CSS-свойство, используемое для указания толщины текста. Оно играет важную роль в визуальном выделении и стиле текста и используется для изменения стиля шрифта. font-weight может быть указан с использованием чисел или ключевых слов для обозначения диапазона толщины от тонкого до жирного текста.

Основные значения `font-weight`

Ключевые слова

1p {
2    font-weight: normal; /* Default thickness */
3}

normal представляет стандартный вес шрифта. Обычно соответствует значению 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold представляет жирный текст. Обычно соответствует значению 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder представляет текст, который жирнее, чем у родительского элемента.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter представляет текст, который легче, чем у родительского элемента.

Числовые значения

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight также может быть указан как число в диапазоне от 100 до 900. Меньшие числа приводят к более тонкому тексту, а большие числа — к более жирному тексту. Обычно шрифтовые семейства поддерживают определенный диапазон толщины, но не все числа доступны для всех шрифтов.

100: Тонкий
200: Экстра тонкий
300: Тонкий
400: Обычный
500: Средний
600: Полужирный
700: Жирный
800: Очень жирный
900: Черный

Примеры использования свойства `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Практическое применение

Обычный текст обычно использует значение 400 (normal).
Для заголовков или выделенных частей обычно используют значение 700 (bold).
В зависимости от дизайна, также могут использоваться промежуточные толщины, такие как 500 или 600, чтобы избежать чрезмерного акцента.

Резюме

font-weight - это свойство, определяющее толщину текста, с использованием ключевых слов, таких как normal или bold, либо значений от 100 до 900.
lighter и bolder изменяют толщину относительно толщины родительского элемента.
Выбор подходящего значения font-weight на основе дизайна и читаемости важен.

Свойство `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style - это CSS-свойство, используемое для задания стиля символов, в частности для применения курсивного или обычного стиля. Это свойство часто используется для выделения текста и дизайна, особенно в заголовках и цитатах.

Основные значения свойства `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal - стандартный стиль символов (обычно прямые символы).

`italic`

1p {
2    font-style: italic;
3}

italic делает текст курсивным (наклонным). Этот стиль можно применять, если семейство шрифтов поддерживает курсив.

`oblique`

1p {
2    font-style: oblique;
3}

oblique делает текст наклонным. В отличие от italic, если шрифт не имеет версии с курсивом, текст может быть наклонен искусственно.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

С помощью oblique можно задать угол наклона текста. Эта спецификация используется для дальнейшей настройки значения oblique. В настоящее время большинство браузеров не поддерживают задание угла, но некоторые поддерживают.

Использование свойства `font-style`

italic часто используется для выделения текста, цитат и названий книг.
oblique часто используется, когда в шрифте отсутствует стиль курсив, чтобы искусственно наклонить текст.
normal используется для возврата к обычному стилю текста.

Резюме

font-style используется для регулировки наклона текста с тремя основными значениями: normal, italic, и oblique.
В дизайне курсив часто используется для выделения текста, а если шрифт не поддерживает курсив, для наклона текста можно использовать oblique.

Свойство `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

Свойство color является основным свойством в CSS для указания цвета текста. Оно используется для изменения цвета текста в HTML-элементах и может задавать цвета в различных форматах.

Объяснение:

Класс color-red задает цвет текста как красный, используя ключевое слово.
- Вы можете указывать названия цветов, такие как red, blue, green, которые определяются в CSS.
Класс color-hex задает цвета с использованием шестнадцатеричных цветовых кодов.
- Вы можете указать цвет с помощью 3 символов, например, #F00. В этом случае #F00 — это тот же цвет, что и #FF0000.
Класс color-rgb задает цвета с использованием формата RGB.
- RGB: Указывает компоненты красного, зеленого и синего в диапазоне от 0 до 255.
Класс color-rgba использует формат RGBA для добавления прозрачности.
Класс color-hsl задает цвета с использованием формата HSL.
- Цвета могут быть заданы оттенком, насыщенностью и яркостью. Оттенок указывается в диапазоне от 0 до 360 градусов, а насыщенность и яркость — в диапазоне от 0% до 100%.
Класс color-hsla использует формат HSLA для добавления прозрачности.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS `@` правила Свойства CSS, связанные с текстом

Свойства CSS, связанные со шрифтами

YouTube Video

Создание HTML для предварительного просмотра

Типографика (Связано со шрифтами)

Свойство font-size

Основные способы задания значений

Абсолютные значения(px, pt)

Относительные значения(em, rem, %)

Ключевые слова

Относительные ключевые слова

Примеры общего использования

Примеры настройки размеров шрифта

Заключение

Свойство font-family

Как указать font-family

Свойство font-weight

Основные значения font-weight

Ключевые слова

Числовые значения

Примеры использования свойства font-weight

Практическое применение

Резюме

Свойство font-style

Основные значения свойства font-style

normal

italic

oblique

oblique <angle>

Использование свойства font-style

Резюме

Свойство color

Объяснение:

YouTube Video

Свойство `font-size`

Свойство `font-family`

Как указать `font-family`

Свойство `font-weight`

Основные значения `font-weight`

Примеры использования свойства `font-weight`

Свойство `font-style`

Основные значения свойства `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Использование свойства `font-style`

Свойство `color`