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
133
134
135
136
137
138
139
140
141
142
|
---
title: CSS Fonts
slug: Web/CSS/CSS_Fonts
tags:
- Aperçu
- CSS
- CSS Fonts
- Reference
translation_of: Web/CSS/CSS_Fonts
---
<div>{{CSSRef}}</div>
<p><strong>CSS Fonts</strong> est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.</p>
<h2 id="Exemple_simple">Exemple simple</h2>
<p>L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.</p>
<h3 id="CSS">CSS</h3>
<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>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>
Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
événements extraordinaires. Tandis qu’elle regardait encore l’endroit
que le Chat venait de quitter, il reparut tout à coup.
</p></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemple_simple', '100%', '200')}}</p>
<h2 id="Exemples_utilisant_les_polices_variables">Exemples utilisant les polices variables</h2>
<p>Vous pouvez trouver plusieurs exemples utilisant les polices variables sur <a href="https://v-fonts.com/">v-fonts.com</a> et <a href="https://www.axis-praxis.org/">axis-praxis.org</a>. Notre <a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guide sur les polices variables</a> contient des informations et des exemples d'utilisation.</p>
<h2 id="Référence">Référence</h2>
<h3 id="Propriétés">Propriétés</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="Règles">Règles @</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="Guides">Guides</h2>
<dl>
<dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Mise en forme du texte et utilisation des polices</a></dt>
<dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd>
<dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType">Guide sur les caractéristiques de police OpenType</a></dt>
<dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd>
<dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></dt>
<dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd>
</dl>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Fonts')}}</td>
<td>{{Spec2('CSS4 Fonts')}}</td>
<td>Ajout de <code>font-variation-settings</code> (ainsi que des propriétés de haut niveau associées) et de <code>font-optical-sizing</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Ajout de <code>font-feature-settings</code> (ainsi que des propriétés de haut niveau associées)</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>Définition initiale.</td>
</tr>
</tbody>
</table>
|
