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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: font-stretch
slug: Web/CSS/@font-face/font-stretch
tags:
- '@font-face'
- CSS
- Descripteur
- Reference
translation_of: Web/CSS/@font-face/font-stretch
---
<p>{{CSSRef}}{{draft}}</p>
<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p>
<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css">/* Valeurs simples */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
/* Valeurs multiples */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Indique la forme normale (en largeur) de la police.</dd>
<dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
<dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd>
<dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
<dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd>
<dt><code><percentage></code></dt>
<dd>Un pourcentage (une valeur de type {{cssxref("<percentage>")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd>
</dl>
<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code><percentage></code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p>
<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p>
<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p>
<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3>
<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p>
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="col">Keyword</th>
<th scope="col">Pourcentage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ultra-condensed</code></td>
<td>50%</td>
</tr>
<tr>
<td><code>extra-condensed</code></td>
<td>62.5%</td>
</tr>
<tr>
<td><code>condensed</code></td>
<td>75%</td>
</tr>
<tr>
<td><code>semi-condensed</code></td>
<td>87.5%</td>
</tr>
<tr>
<td><code>normal</code></td>
<td>100%</td>
</tr>
<tr>
<td><code>semi-expanded</code></td>
<td>112.5%</td>
</tr>
<tr>
<td><code>expanded</code></td>
<td>125%</td>
</tr>
<tr>
<td><code>extra-expanded</code></td>
<td>150%</td>
</tr>
<tr>
<td><code>ultra-expanded</code></td>
<td>200%</td>
</tr>
</tbody>
</table>
<h3 id="Polices_variables">Polices variables</h3>
<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p>
<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p>
<pre class="brush: css">@font-face {
font-family: "Open Sans";
src: local("Open Sans") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-stretch: 87.5% 112.5%;
}</pre>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p>
<ul>
<li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li>
</ul>
<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', '#font-prop-desc', 'font-stretch')}}</td>
<td>{{Spec2('CSS4 Fonts')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
<li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
<li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li>
<li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
<li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
<li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
<li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
<li>{{cssxref("@font-face/src", "src")}}</li>
<li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
</ul>
|
