CSS Font Border?

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

Hay una propiedad CSS experimental llamada trazo de texto , compatible con algunos navegadores detrás de un prefijo -webkit .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

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

Pero se volvería borroso por más de 1 píxel de grosor.

ACTUALIZAR

Aquí hay una combinación 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);
}

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

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

ESTE es un borde negro de 2px con soporte para CrossBrowser (no IE). Necesitaba esto para las fuentes @fontface, por lo que necesitaba ser más limpio que las respuestas vistas anteriormente ... Aprovecho cada lado en píxeles para asegurarme de que no haya (casi) espacios en blanco " fuentes difusas "(handrawn o similar). Se podrían agregar subpíxeles (0.5px) pero no lo necesito.

¿Código largo solo para el borde? ...¡¡¡SI!!!

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;

Tal vez podría emular un trazo de texto, usando css text-shadow(o -webkit-text-shadow/ -moz-text-shadow) y un desenfoque muy bajo:

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

Pero aunque esto está más ampliamente disponible que la -webkit-text-strokepropiedad, dudo que esté disponible para la mayoría de sus usuarios, pero eso podría no ser un problema (degradación elegante y todo eso).

Para obtener más información sobre algunas respuestas que han mencionado -webkit-text-stroke, aquí está el código para que funcione:

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

Un artículo en profundidad sobre el uso de accidente cerebrovascular texto es aquí y una lista de los navegadores que el accidente cerebrovascular texto de apoyo es aquí .

Parece que hay una propiedad de 'trazo de texto', pero (al menos para mí) solo funciona en Safari.

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

Esto es lo que estoy usando:

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

Trazo de fuente con un mixin menos

Aquí hay una MENOS mezcla para generar el accidente cerebrovascular: 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;
}

(se basa en la respuesta pixelass que en su lugar usa SCSS)

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

Creé una comparación de todas las soluciones mencionadas aquí para tener una visión general rápida:

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

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

Una vez intenté hacer esas esquinas redondeadas y soltar sombras con css3. Más tarde, descubrí que todavía es poco compatible (¡Internet Explorer (s), por supuesto!)

Terminé tratando de hacer eso en JS (lienzo HTML con IE Canvas), pero afecta mucho el rendimiento (incluso en mi máquina C2D). En resumen, si realmente necesita el efecto, considere las bibliotecas JS (la mayoría de ellas deberían poder ejecutarse en IE6) pero no lo haga demasiado debido a problemas de rendimiento; si todavía necesita una alternativa ... podría usar SFiR, luego PS it y SFiR it. CSS3 no está listo hoy.

Lo siento, llego tarde, pero hablando de text-shadow, pensé que también te gustaría este ejemplo (lo uso con bastante frecuencia cuando necesito buenas sombras en el texto):

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