Propriété CSS text-stroke-width

La propriété -webkit-text-stroke-width définit l'épaisseur du contour (stroke) dessiné autour de chaque caractère. Elle constitue l'une des deux moitiés de la fonctionnalité text-stroke : cette propriété contrôle la largeur du contour, tandis que text-stroke-color en contrôle la couleur.

Un contour de texte est peint par-dessus le remplissage normal des lettres, centré sur le bord de chaque glyphe. Avec une largeur plus grande, les lettres apparaissent avec un contour ou semblent « creuses » ; avec une largeur à 0 (la valeur par défaut), aucun contour n'est tracé. C'est pourquoi cette propriété est très utilisée pour créer des titres d'affichage en gras, du texte évidé et des titres décoratifs sans avoir recours à une image.

h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #1c87c9;
}

Pourquoi et quand l'utiliser

Utilisez text-stroke-width lorsque vous souhaitez un effet de contour net quelle que soit la taille et qui reste du texte réel et sélectionnable :

Titres avec contour — donnez à un titre une bordure colorée pour un aspect affiche.
Texte évidé / creux — combinez un contour avec text-fill-color: transparent pour n'afficher que le contour et laisser le fond transparaître à travers les lettres.
Lisibilité sur les images — un contour fin peut séparer du texte clair d'un arrière-plan chargé, à l'instar de text-shadow mais en restant plus proche du glyphe.

Info

text-stroke-width n'est pas une propriété standardisée autonome. La forme standard est le raccourci text-stroke (CSS Text Decoration Level 4). En pratique, tous les navigateurs actuels requièrent encore le préfixe -webkit-, il faut donc utiliser -webkit-text-stroke-width pour la largeur et le combiner avec -webkit-text-stroke-color pour la couleur.

Points de vigilance

Définissez toujours une couleur également. Une largeur sans -webkit-text-stroke-color se replie sur currentColor (la couleur de texte de l'élément), ce qui peut rendre le contour invisible sur le remplissage. Définissez les deux, ou utilisez le raccourci text-stroke : -webkit-text-stroke: 2px #1c87c9;.
La largeur s'étend vers l'intérieur et l'extérieur. Le contour est centré sur le bord du glyphe ; un contour large sur un texte petit empiète sur la forme des lettres et nuit à la lisibilité. Utilisez des valeurs de font-size plus grandes pour des contours plus épais.
Non animable. Effectuer une transition sur la largeur directement n'a aucun effet.
Prévoyez une solution de repli. Les navigateurs ne prenant pas en charge -webkit-text-stroke l'ignorent simplement et affichent le texte brut ; le résultat doit donc rester lisible sans le contour.

Valeur initiale	0
S'applique à	Tous les éléments.
Hérité	Non.
Animable	Non
Version	CSS Text Decoration Module Level 4 (préfixe vendeur)
Syntaxe DOM	object.style.webkitTextStrokeWidth = "1px";

Syntaxe

Valeurs de CSS text-stroke-width

-webkit-text-stroke-width: length | initial | inherit;

Exemple de la propriété text-stroke-width :

Différentes unités (px, mm) permettent toutes de définir l'épaisseur du contour. Ici, trois paragraphes partagent la même couleur de contour mais utilisent des largeurs fine, moyenne et épaisse pour les comparer.

Exemple de code CSS text-stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p, h2 {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: 1px;
      }
      .medium {
        -webkit-text-stroke-width: 3.5px;
      }
      .thick {
        -webkit-text-stroke-width: 1.3mm;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-width property example</h2>
    <p class="thin">Lorem Ipsum </p>
    <p class="medium">Lorem Ipsum</p>
    <p class="thick">Lorem Ipsum</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de texte évidé (creux) :

Définir text-fill-color sur transparent masque le remplissage des lettres, de sorte que seul le contour est peint. C'est l'effet classique « contour uniquement » pour les titres.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 5em;
        font-family: sans-serif;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Remarque : lorsqu'il est pris en charge, vous pouvez remplacer les deux déclarations -webkit-text-stroke-* par le raccourci text-stroke, par exemple -webkit-text-stroke: 2px #8ebf42;.

Valeurs

Valeur	Description
length	Spécifie l'épaisseur du contour.
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite de la propriété depuis son élément parent.

Propriétés associées

text-stroke — le raccourci qui définit la largeur et la couleur en une seule fois.
text-stroke-color — définit la couleur du contour.
text-fill-color — contrôle le remplissage des lettres (utilisez transparent pour un texte évidé).
text-shadow — une autre façon d'ajouter de la profondeur ou du contraste au texte.

Pratique

Quelle affirmation est incorrecte à propos de la propriété CSS text-stroke-width ?

Elle peut être appliquée à tous les éléments.C'est une propriété animable.Elle spécifie la largeur du contour.