Propriété CSS text-stroke
Utilisez la propriété CSS text-stroke pour définir la largeur et la couleur du contour. Découvrez les valeurs et pratiquez avec des exemples.
La propriété text-stroke trace un contour (un stroke) autour de chaque caractère du texte, vous permettant de contrôler le bord des glyphes plutôt que simplement leur remplissage. C'est une propriété raccourcie pour deux propriétés longues :
- text-stroke-width — l'épaisseur du contour.
- text-stroke-color — la couleur du contour.
Cette page couvre la syntaxe, les valeurs acceptées, une stratégie de repli pour les navigateurs non pris en charge, ainsi que des exemples interactifs.
Pourquoi utiliser text-stroke
Les polices web sont généralement construites à partir de graphiques vectoriels : la forme d'un glyphe est décrite par des courbes et des points mathématiques, et non par des pixels. Comme le contour est un vrai chemin géométrique, le navigateur peut peindre le long de ce chemin — exactement comme les logiciels de dessin vectoriel peuvent ajouter un contour à une forme. text-stroke expose cette capacité en CSS, ce qui est pratique pour les grands titres d'affichage, les logos ou les lettres « encadrées » où un text-shadow ne donnerait pas un bord net.
Un motif courant est le caractère contour uniquement : définissez text-fill-color sur transparent afin que l'intérieur de chaque glyphe soit vide et que seul le contour soit visible.
text-stroke est non standard. En pratique, vous devez l'écrire avec le préfixe -webkit- (-webkit-text-stroke). Les implémentations diffèrent légèrement selon les navigateurs et le comportement peut changer à l'avenir ; fournissez donc toujours une solution de repli.
Prise en charge par les navigateurs et solution de repli
Comme la prise en charge n'est pas garantie, ne vous fiez jamais au contour seul. La propriété text-fill-color remplace la propriété color habituelle uniquement dans les navigateurs qui la comprennent ; la technique habituelle est donc :
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}Les navigateurs sans -webkit-text-fill-color ignorent ces deux lignes et affichent du texte #1c87c9 simple. Vous pouvez choisir des couleurs dans la référence des couleurs HTML.
| Valeur initiale | 0 currentColor (c'est-à-dire largeur nulle) |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Non (les propriétés longues text-stroke-width et text-stroke-color le sont). |
| Version | Compatibility Standard |
| Syntaxe DOM | object.style.webkitTextStroke = "1px #666"; |
Syntaxe
Valeurs CSS de text-stroke
-webkit-text-stroke: <width> <color> | initial | inherit;Les deux parties sont indépendantes de l'ordre et l'une ou l'autre peut être omise. La largeur accepte n'importe quelle unité CSS de longueur (px, pt, em, cm, …) ; la couleur accepte n'importe quelle valeur de couleur CSS.
Exemple de la propriété text-stroke :
Exemple de code CSS text-stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Résultat
Exemple de la propriété text-stroke avec plusieurs valeurs :
Exemple CSS text-stroke avec valeurs multiples
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
}
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
}
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ici, 1px, 2pt et 0.1cm sont tous des unités de largeur valides, de sorte que les trois paragraphes obtiennent des contours de plus en plus épais.
Valeurs
| Valeur | Description |
|---|---|
| length | Spécifie l'épaisseur du contour. |
| color | Spécifie la couleur du contour. Les noms de couleurs, les codes couleur hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |