1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: CSS Fonts
slug: Web/CSS/CSS_Fonts
translation_of: Web/CSS/CSS_Fonts
---
<div>{{CSSRef}}</div>
<p><strong>CSS Fonts</strong> - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько</p>
<h2 id="Базовый_пример">Базовый пример</h2>
<p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.</p>
<pre class="brush: css notranslate">p {
width: 600px;
margin: 0 auto;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-style: italic;
font-weight: 100;
font-variant-ligatures: normal;
font-size: 2rem;
letter-spacing: 1px;
}</pre>
<pre class="brush: html notranslate"><p>Three hundred years ago<br>
I thought I might get some sleep<br>
I stretched myself out onna antique bed<br>
An' my spirit did a midnite creep</p></pre>
<p>Вывод на экран будет следующим:</p>
<p>{{EmbedLiveSample('Базовый_пример', '100%', '200')}}</p>
<h2 id="Различные_примеры_шрифтов">Различные примеры шрифтов</h2>
<p>Вы можете найти множество вариантов шрифтов на <a href="https://v-fonts.com/">v-fonts.com</a> и <a href="https://www.axis-praxis.org/">axis-praxis.org</a>; так же смотрите наше руководство <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> для большей информации по использованию.</p>
<h2 id="Отсылки">Отсылки</h2>
<h3 id="Properties">Properties</h3>
<div class="index">
<ul>
<li>{{cssxref("font")}}</li>
<li>{{cssxref("font-family")}}</li>
<li>{{cssxref("font-feature-settings")}}</li>
<li>{{cssxref("font-kerning")}}</li>
<li>{{cssxref("font-language-override")}}</li>
<li>{{cssxref("font-optical-sizing")}}</li>
<li>{{cssxref("font-size")}}</li>
<li>{{cssxref("font-size-adjust")}}</li>
<li>{{cssxref("font-stretch")}}</li>
<li>{{cssxref("font-style")}}</li>
<li>{{cssxref("font-synthesis")}}</li>
<li>{{cssxref("font-variant")}}</li>
<li>{{cssxref("font-variant-alternates")}}</li>
<li>{{cssxref("font-variant-caps")}}</li>
<li>{{cssxref("font-variant-east-asian")}}</li>
<li>{{cssxref("font-variant-ligatures")}}</li>
<li>{{cssxref("font-variant-numeric")}}</li>
<li>{{cssxref("font-variant-position")}}</li>
<li>{{cssxref("font-variation-settings")}}</li>
<li>{{cssxref("font-weight")}}</li>
<li>{{cssxref("line-height")}}</li>
</ul>
</div>
<h3 id="At-rules">At-rules</h3>
<dl>
<dt>{{cssxref("@font-face")}}</dt>
<dd>
<div class="index">
<ul>
<li>{{cssxref("@font-face/font-family", "font-family")}}</li>
<li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
<li>{{cssxref("@font-face/font-style", "font-style")}}</li>
<li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
<li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
<li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
<li>{{cssxref("@font-face/src", "src")}}</li>
<li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
</ul>
</div>
</dd>
<dt>{{cssxref("@font-feature-values")}}</dt>
</dl>
<h2 id="Руководство">Руководство</h2>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
<dd>В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt>
<dd>Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt>
<dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Fonts')}}</td>
<td>{{Spec2('CSS4 Fonts')}}</td>
<td>Adds <code>font-variation-settings</code> (and related higher-level properties) and <code>font-optical-sizing</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Adds <code>font-feature-settings</code> (and related higher-level properties)</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#font', '')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
|
