Propriété CSS font-stretch
La propriété font-stretch permet de rendre le texte plus étroit ou plus large.
La propriété font-stretch ne fonctionnera pas sur n'importe quelle police! Elle fonctionnera seulement si la famille de police a width-variant faces. La propriété font-stretch elle-même étend une police.
Cetta propriété a les valeurs suivantes:
- font-stretch:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
| Valeur initiale | normal |
| Appliquée à | Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontStretch = "expanded"; |
Syntaxe
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">A</span>
<span style="font-stretch: extra-condensed">A</span>
<span style="font-stretch: condensed">A</span>
<span style="font-stretch: semi-condensed">A</span>
<span style="font-stretch: normal">A</span>
<span style="font-stretch: semi-expanded">A</span>
<span style="font-stretch: expanded">A</span>
<span style="font-stretch: extra-expanded">A</span>
<span style="font-stretch: ultra-expanded">A</span>
</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| ultra-condensed | Rend le texte si condensé si possible. |
| extra-condensed | Rend le texte plus condensé mais pas si condensé si avec la valeur ultra-condesed. |
| condensed | Rend le texte plus condensé mais pas si condensé si avec la valeur ultra-condesed. |
| semi-condensed | Rend le texte plus condensé mais pas si condensé si avec la valeur extra-condesed. |
| normal | Une fonte normale. C'est la valeur initiale de cette propriété. |
| semi-expanded | Rend le texte plus étendu que le normal. |
| expanded | Rend le texte plus étendu que semi-expanded. |
| extra-expanded | Rend le texte plus étendu que expanded. |
| ultra-expanded | La forme de texte la plus étendue. |
| initial | Fait la propriété utiliser sa valeur initiale. |
| inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| 48.0+ | 12.0+ | 9.0+ | 11.0+ | 35.0+ |
Pratiquez vos connaissances
Qu'est-ce que la propriété 'font-stretch' en CSS?
Correcte!
Incorrecte!