blob: d536c50a2a709a2418820097a1da1f9f05ae254a (
plain)
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
|
---
title: font-display
slug: Web/CSS/@font-face/font-display
tags:
- CSS
- Descripteur
- Experimental
- Reference
translation_of: Web/CSS/@font-face/font-display
---
{{CSSRef}}
La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.
## Le déroulement de l'affichage d'une police
La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.
- Période 1 : Blocage des fontes
- : Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
- Période 2 : Échange des fontes
- : Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
- Période 3 : Échec du chargement des fontes
- : Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.
{{cssinfo}}
## Syntaxe
```css
/* Valeurs avec un mot-clé */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```
### Valeurs
- `auto`
- : La stratégie d'affichage de la fonte est définie par l'agent utilisateur.
- `block`
- : La période de blocage est courte et est suivi d'une période d'échange infinie.
- `swap`
- : La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.
- `fallback`
- : La période de blocage est extrêmement courte et est suivie par une courte période d'échange.
- `optional`
- : La période de blocage est extrêmement courte et il n'y a pas de période d'échange.
### Syntaxe formelle
{{csssyntax}}
## Exemples
```css
@font-face {
font-family: FonteExemple;
src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
url(/chemin/vers/fonts/examplefont.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
```
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
| {{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}} | {{Spec2('CSS4 Fonts')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("css.at-rules.font-face.font-display")}}
|
