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

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

Exemple

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

<p>
	Text
</p>

body {
	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 :

<p>
	Text
</p>

body {
	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 :

<p>
	Text
</p>

body {
	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 :

<p>
	Text
</p>

body {
	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

la propriété text-stroke,
qui définit le contour du texte
la propriété text-stroke-color,
qui définit la couleur du contour du texte