¿Borde de fuente CSS?

Con todo lo nuevo en el borde de CSS3 ( -webkit , …) ¿ahora es posible agregar un borde a tu fuente? (Como 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 aún necesito encender Photoshop?

La respuesta correcta es:

 h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } 
 

Hello World

ACTUALIZAR

Aquí hay una mezcla de 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); } 

enter image description here

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 2px con soporte CrossBrowser (no IE) Lo necesitaba para las fonts @fontface, así que necesitaba ser más limpio que las respuestas vistas anteriormente … Tomo cada lado en píxeles para asegurarme de que no haya (casi) huecos para ” borroso “(handrawn o similar) fonts. Subpíxeles (0.5px) podrían agregarse pero no lo necesito.

Código largo para solo el borde ??? …¡¡¡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; 

Quizás -webkit-text-shadow emular un trazo de texto, usando la text-shadow css (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 está más ampliamente disponible que la -webkit-text-stroke , 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; } 

Se encuentra aquí un artículo en profundidad sobre el uso del trazo de texto y una lista de navegadores compatibles con el trazo de texto.

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

Estilo de letra de trazo con una mezcla menos

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

(Está basado en una respuesta de 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; 

Una vez intenté hacer esas esquinas redondeadas y dejar caer sombras con css3. Más tarde, descubrí que todavía está mal soportado (¡Internet Explorer (s), por supuesto!)

Terminé intentando hacer eso en JS (canvas HTML con IE Canvas), pero tiene un gran impacto en 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 en exceso debido a problemas de rendimiento; si aún necesita una alternativa … puede usar SFiR, luego PS y SFiR. CSS3 no está listo hoy.