web-dev-qa-db-fra.com

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

J'aimerais ajouter un contour noir autour de chaque caractère. Ainsi, si l'identifiant de police sur le même fond de couleur que le premier plan est toujours lisible.

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

css3
33
Justin808

Vous pouvez le simuler avec le CSS 2.1 text-shadow property: 

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 entendu pas pris en charge dans IE9 et ses versions antérieures. Voir: http://www.jsfiddle.net/yijiang/UCjgg/ pour une simple démonstration. 

55
Yi Jiang

Il existe un moyen explicite, -webkit, d’ajouter un contour de texte, qui est avec -text-stroke . Il s'agit de la mise en œuvre expérimentale de la proposition de piste de normes équivalente (appelée text-outline dans les documents de spécifications CSS3). 

2
Michael Mullany

Avant de commencer, je tiens à préciser que la réponse de Yi Jiang est la réponse correcte à votre question telle quelle, de toute façon je voulais ajouter quelque chose.

Si vous avez besoin d’un moyen compatible pour le faire, le seul moyen auquel je peux penser est d’utiliser une police avec contour par conception .

Vous pouvez même utiliser le l'API de police de Google et disposer d'une solution très compatible.

Bonne chance!

0
Trufa