Text border using css (bordure autour du texte)

Question

Existe-t-il un moyen d'intégrer une bordure autour du texte comme l'image ci-dessous?

Answer 1

Utilisez plusieurs ombres de texte :

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

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

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

test

Alternativement, vous pourriez utiliser -webkit-text-stroke, qui produit un résultat légèrement différent car il modifie la largeur du trait au lieu d'ajouter des ombres supplémentaires autour du texte. Malgré le préfixe webkit, cela fonctionne dans la plupart des navigateurs (y compris Firefox) à partir de 2022 :

-webkit-text-stroke: 2px #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  -webkit-text-stroke: 2px #fff;
}

test

Lisez aussi en savoir plus sur CSS-Tricks.

Answer 2

Bien sûr. Vous pourriez utiliser CSS3 text-shadow :

text-shadow: 0 0 2px #fff;

Cependant, cela ne s'affichera pas immédiatement dans tous les navigateurs. L'utilisation d'une bibliothèque de scripts comme Modernizr aidera à obtenir le bon affichage dans la plupart des navigateurs.

Answer 3

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 contour de 2 pixels où il y a 8 directions à ajouter, mais avec seulement 3 pixels de contour, le nombre de directions devient 16, et ainsi de suite... Pas vraiment confortable à gérer.

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

Pour moi, la meilleure solution reste le SVG avec une alternative en texte non contouré 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;
  }

    Texte contouré

Answer 4

text-shadow: -1px 0 noir, 0 1px noir, 1px 0 noir, 0 -1px noir;

Answer 5

Ce qui suit couvrira tous les navigateurs qui valent la peine d'être couverts :

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 */