Bordure de police CSS ?

Question

Avec toutes les nouveautés en matière de bordures CSS3 ( -webkit ...) est-il maintenant possible d'ajouter une bordure à votre police ? (Comme la bordure blanche solide autour du logo bleu de Twitter). Si ce n'est pas le cas, existe-t-il des astuces pas trop moches qui permettent de le faire en CSS/XHTML ou dois-je encore utiliser Photoshop ?

Answer 1

Il existe une propriété CSS expérimentale appelée frappe du texte , supporté 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 elle devient floue pour une épaisseur de plus d'un pixel.

Answer 2

UPDATE

Voici un mixin 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éteste taper du code...

CECI est une bordure noire de 2px avec support CrossBrowser (pas IE) J'en avais besoin pour les polices @fontface donc il fallait que ce soit plus propre que les réponses vues précédemment... Je prends chaque côté en pixel pour m'assurer qu'il n'y a (presque) aucun vide pour les polices "floues" (dessinées à la main ou similaires). Des sous-pixels (0,5px) pourraient être ajoutés mais je n'en ai pas besoin.

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

Answer 3

Vous pourriez peut-être émuler une frappe 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 qu'il soit plus largement disponible que le -webkit-text-stroke propriété, je doute qu'elle soit disponible pour la majorité de vos utilisateurs, mais cela pourrait ne pas être un problème (dégradation gracieuse, et tout ça).

Answer 4

Pour approfondir 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 approfondi sur l'utilisation du trait de texte est aquí et la liste des navigateurs qui prennent en charge le trait de texte est la suivante aquí .

Answer 5

Il semble exister une propriété "text-stroke", mais (du moins pour moi) elle ne fonctionne que dans Safari.

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