Bordure de texte à l’aide de css (bordure autour du texte)

Est-il possible d’intégrer une bordure autour du texte comme l’image ci-dessous?

bordure de texte

Utilisez plusieurs ombres de texte:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; 

entrer la description de l'image ici

 body { font-family: sans-serif; background: #222; color: darkred; } h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; } 
 

test

Sûr. Vous pouvez utiliser CSS3 text-shadow :

 text-shadow: 0 0 2px #fff; 

Cependant, il ne sera pas affiché dans tous les navigateurs immédiatement. L’utilisation d’une bibliothèque de scripts telle que Modernizr vous aidera à la trouver correctement dans la plupart des navigateurs.

Ce qui suit couvrira tous les navigateurs intéressant:

 text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */ 
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 

Je n’aime pas beaucoup les solutions basées sur la multiplication des ombres de texte, ce n’est pas vraiment flexible, cela peut fonctionner pour un trait de 2 pixels où les directions à append sont 8, mais avec seulement 3 pixels Pas vraiment confortable à gérer.

Le bon outil existe, c’est SVG Le problème de support des navigateurs ne vaut rien dans ce cas, car l’utilisation de text-shadow a aussi son propre problème de support, filter: progid:DXImageTransform peut être utilisé ou IE <10 mais souvent ne fonctionne pas comme prévu.

Pour moi, la meilleure solution rest SVG avec une solution de repli en texte non tracé pour les anciens navigateurs:

Ce type d’approche fonctionne pratiquement sur toutes les versions de Chrome et Firefox, Safari depuis la version 3.04, Opera 8, IE 9

Comparé à text-shadow dont les supports sont: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, il est encore plus compatible.

 .stroke { margin: 0; font-family: arial; font-size:70px; font-weight: bold; } svg { display: block; } text { fill: black; stroke: red; stroke-width: 3; } 
 

Stroked text

 body { font-family: sans-serif; background: #222; color: darkred; } h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; } 
 

test