¿Borde de fuente CSS?

Con todas las nuevas cosas relacionadas con los bordes de CSS3 ( -webkit,...), ¿es posible ahora agregar un borde a su fuente? (Como el borde blanco sólido alrededor del logo azul de Twitter). Si no es así, ¿hay algún truco no demasiado feo que logre esto en CSS/XHTML o aún necesito iniciar Photoshop?

Apr 03 '10 17:04 Lars Tackmann

Hay una propiedad CSS experimental llamada text-stroke , compatible con algunos navegadores detrás del prefijo -webkit .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Expandir fragmento

Otro posible truco sería utilizar cuatro sombras, un píxel cada una en todas las direcciones, utilizando la propiedad 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>

Expandir fragmento

Pero se vería borroso en más de 1 píxel de espesor.

Nov 24 '2010 17:11 Narcélio Filho

ACTUALIZAR

Aquí hay un mixin SCSS para generar el trazo: 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);
}

ingrese la descripción de la imagen aquí

SÍ, vieja pregunta... con respuestas aceptadas (y buenas).

PERO... En caso de que alguien alguna vez necesite esto y odie escribir código...

ESTE es un borde negro de 2 píxeles compatible con CrossBrowser (no IE). Lo necesitaba para las fuentes @fontface, por lo que tenía que ser más limpio que las respuestas vistas anteriormente... Tomo cada lado en píxeles para asegurarme de que no haya (casi) espacios para " fuentes difusas" (dibujadas a mano o similares). Se podrían agregar subpíxeles (0,5 px), pero no los necesito.

¿Código largo solo para la frontera? ...¡¡¡SÍ!!!

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;

Jan 03 '2012 12:01