Propriété text-stroke-width

La propriété text-stroke-width définit l'épaisseur du contour des caractères de texte ou de son contour. La propriété accepte des valeurs spécifiées en unités de taille comme px, em, rem, etc. Il est également possible de définir les valeurs suivantes : thin (ligne fine), medium (ligne moyenne) et thick (ligne épaisse).

Syntaxe

csssélecteur {
  text-stroke-width: nombre ou thin ou medium ou thick;
}

Exemple

Définissons un contour fin pour les caractères de notre texte :

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thin;
  text-stroke-width: thin;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Exemple

Maintenant, remplaçons le contour fin par un contour moyen :

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: medium;
  text-stroke-width: medium;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Exemple

Définissons un contour épais pour les caractères de notre texte :

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thick;
  text-stroke-width: thick;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Exemple

Définissons également un contour de 2px pour les caractères de notre texte :

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: 2px;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Voir aussi