Propriété CSS text-stroke

La propriété text-stroke est une propriété expérimentale offrant des options de décoration pour le texte. C'est un raccourci pour les propriétés suivantes :

Il existe la propriété text-fill-color, qui remplace la propriété color, permettant un retour élégant à une couleur de texte différente dans les navigateurs qui ne prennent pas en charge la propriété text-stroke.

Vous pouvez choisir des couleurs ici : Couleurs HTML.

Les polices web sont généralement basées sur des graphiques vectoriels, ce qui signifie que la forme est déterminée par des mathématiques et des points plutôt que par des données pixel. Comme elles sont vectorielles, nous pouvons faire tout ce qui peut être fait avec du texte vectoriel par d'autres programmes vectoriels. Par exemple, nous pouvons ajouter un contour à certains caractères.

attention
La propriété text-stroke n'est utilisée qu'avec le préfixe fournisseur -webkit-. Cette propriété n'est pas standard. Elle ne fonctionne pas pour tous les utilisateurs. Il existe des incompatibilités entre les implémentations, et le comportement peut changer à l'avenir.

Valeur initiale	0 currentColor
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Oui.
Version	Norme de compatibilité
Syntaxe DOM	object.style.textStroke = "1px #666";

Syntaxe

Valeurs CSS text-stroke

css

text-stroke: length | color | initial | inherit;

Exemple de la propriété text-stroke :

Exemple de code CSS text-stroke

html

<!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>

Try it Yourself »

Résultat

Exemple de la propriété text-stroke avec plusieurs valeurs :

Exemple de valeurs multiples pour CSS text-stroke

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description
length	Spécifie l'épaisseur du trait.
color	Spécifie la couleur du trait. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

La propriété text-stroke est un raccourci pour les propriétés suivantes :

text-stroke-style, text-stroke-colortext-stroke-width, text-stroke-colortext-stroke-width, text-stroke-styletext-stroke-style, text-stroke-type

Propriété CSS text-stroke ​

Syntaxe ​

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

Résultat ​

Exemple de la propriété text-stroke avec plusieurs valeurs : ​

Valeurs ​