Bordure de police CSS?

Avec tous les nouveaux trucs de bordure CSS3 en cours ( -webkit, ...) est-il maintenant possible d'ajouter une bordure à votre police? (Comme la bordure blanche unie autour du logo Twitter bleu). Sinon, y a-t-il des hacks pas trop laids qui accompliront cela en CSS / XHTML ou ai-je encore besoin de lancer Photoshop?

Il existe une propriété CSS expérimentale appelée text-stroke , prise en charge sur certains navigateurs derrière un préfixe -webkit .

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Une autre astuce possible serait d'utiliser quatre ombres, un pixel chacune dans toutes les directions, en utilisant la propriété text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Mais il deviendrait flou pour plus de 1 pixel d'épaisseur.

MISE À JOUR

Voici un mixage SCSS pour générer le trait: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

OUI vieille question .. avec des réponses acceptées (et bonnes) ..

MAIS ... Au cas où quelqu'un en aurait besoin et détesterait taper du code ...

CECI est une bordure noire de 2 pixels avec prise en charge de CrossBrowser (pas IE). J'en avais besoin pour les polices @fontface, donc il fallait qu'elle soit plus propre que les réponses précédentes. polices "floues" (dessinées à la main ou similaires). Des sous-pixels (0,5 px) pourraient être ajoutés mais je n'en ai pas besoin.

Code long pour juste la frontière ??? ...OUI!!!

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

Vous pourriez peut-être émuler un trait de texte, en utilisant le CSS text-shadow(ou -webkit-text-shadow/ -moz-text-shadow) et un flou très faible:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

Mais bien que cela soit plus largement disponible que la -webkit-text-strokepropriété, je doute qu'il soit disponible pour la majorité de vos utilisateurs, mais cela pourrait ne pas être un problème (dégradation gracieuse, et tout ça).

Pour en savoir plus sur certaines réponses qui ont mentionné -webkit-text-stroke, voici le code pour le faire fonctionner:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

Un article détaillé sur l'utilisation du trait de texte est ici et une liste des navigateurs qui prennent en charge le trait de texte est ici .

Il semble y avoir une propriété 'text-stroke', mais (au moins pour moi) cela ne fonctionne que dans Safari.

http://webkit.org/blog/85/introducing-text-stroke/

Voici ce que j'utilise:

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Caractère de police de trait avec un mixage moins

Voici un mixin MOINS pour générer le coup: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(il est basé sur une réponse pixelass qui utilise à la place SCSS)

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

J'ai créé une comparaison de toutes les solutions mentionnées ici pour avoir un aperçu rapide:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

J'ai essayé une fois de faire ces coins arrondis et de faire des ombres avec css3. Plus tard, j'ai trouvé qu'il était toujours mal pris en charge (Internet Explorer (s), bien sûr!)

J'ai fini par essayer de le faire en JS (toile HTML avec IE Canvas), mais cela a beaucoup d'impact sur les performances (même sur ma machine C2D). En bref, si vous avez vraiment besoin de l'effet, pensez aux bibliothèques JS (la plupart d'entre elles devraient pouvoir fonctionner sur IE6) mais ne le faites pas trop à cause de problèmes de performances; si vous avez encore besoin d'une alternative ... vous pouvez utiliser SFiR, puis PS et SFiR. CSS3 n'est pas prêt aujourd'hui.

Désolé, je suis en retard, mais en parlant de text-shadow, je pensais que vous aimeriez aussi cet exemple (je l'utilise assez souvent quand j'ai besoin de bonnes ombres sur le texte):

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}