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

Je voudrais ajouter un contour noir autour de chaque personnage, donc si l'id de police sur la même couleur de fond que le premier plan, il est toujours lisible.

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

InformationsquelleAutor Justin808 | 2011-01-23
  1. 57

    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;
}

    C'est, bien sûr, n'est pas pris en charge dans IE9 et ci-dessous. Voir: http://www.jsfiddle.net/yijiang/UCjgg/ pour une simple démo.

    • text-shadow n'est pas pris en charge dans IE9 soit.
    • Pour ceux qui sont curieux à propos de la syntaxe de Yi Jiang réponse, c'est: text-shadow: h-shadow v-flou-rayon de couleur|aucun|initiale|inherit; voir: W3schools CSS3 text-shadow pour plus d'informations.
    InformationsquelleAutor Yi Jiang
  2. 2

    Il est explicite -webkit façon d'ajouter de contour du texte, qui est avec -texte-avc. C'est la mise en œuvre expérimentale de l'équivalent de suivi des normes de proposition (appelé texte-plan dans le CSS3 spec docs).

    InformationsquelleAutor Michael Mullany
  3. 0

    Avant de commencer je tiens à préciser que Yi Jiang réponse est la bonne à votre question, comme il est, de toute façon je voulais ajouter un peu de tout.

    Si vous avez besoin d'compatible façon de le faire, la seule façon que je peux penser à est de à l'aide de une police avec un contour en conception.

    Vous pourriez même utiliser le Google de Police de l'API et ont un très une solution compatible.

    Bonne chance!

    InformationsquelleAutor Trufa
  4. 0

    Alors que nous attendons pour text-stroke à être largement pris en charge, il y a de très bon "text-shadow hack" générateur pour générer le texte de l'ombre de la propriété dont vous avez besoin.

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

    CSS:

    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;
}

    HTML:

    <h1>yayyy text</h1>

    InformationsquelleAutor FelDev