CSS - Est-il possible d'ajouter un contour noir autour de chaque caractère d'un texte ?

Question

J'aimerais ajouter un contour noir autour de chaque caractère, de sorte que si la police est sur un arrière-plan de la même couleur que l'avant-plan, elle reste lisible.

Cela peut-il être fait en CSS avec ou sans css spécifique au navigateur ?

Answer 1

Vous pouvez le simuler avec le CSS 2.1 text-shadow propriété :

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

Ceci n'est bien sûr pas supporté par IE9 et les versions inférieures. Voir : http://www.jsfiddle.net/yijiang/UCjgg/ pour une démonstration simple.

Answer 2

Dans l'attente de text-stroke n'est pas encore largement supporté, il existe un bon générateur de "text-shadow hack" pour générer la propriété text-shadow dont vous avez besoin.

https://owumaro.github.io/text-stroke-generator/

h1 {
  color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}

<h1>yayyy text</h1>

Answer 3

Les ombres peuvent faire l'affaire.

h1 {
   color: white;
   text-shadow: black 0px 0px 2px; /* color offset-x offset-y blur-radius */
}

<h1>White text with black outline</h1>

Answer 4

Il existe un moyen explicite -webkit d'ajouter des contours de texte, qui consiste à utiliser la fonction -text-stroke . Il s'agit de l'implémentation expérimentale de la proposition équivalente de la piste de normalisation (appelée text-outline dans la documentation de la spécification CSS3).

Answer 5

Avant de commencer, je tiens à préciser que Réponse de Yi Jiang est la bonne réponse à votre question telle qu'elle est, mais je voulais quand même apporter un petit complément.

---

Si vous avez besoin d'une méthode compatible, la seule que je connaisse est l'utilisation de une police de caractères avec contour par conception .

Vous pouvez même utiliser la fonction L'API de Google pour les polices de caractères et ont une solution très compatible.

Bonne chance !