¿Borde de fuente CSS?

Question

Más

Fuente Versión no AMP Editar

¿Borde de fuente CSS?

Con todo el nuevo tema de los bordes de CSS3 (-webkit, ...) ¿es posible ahora añadir un borde a tu fuente? (Como el borde blanco sólido alrededor del logo azul de Twitter). Si no es así, ¿hay algún truco no demasiado feo para conseguirlo en CSS/XHTML o tengo que usar Photoshop?

user2441511

Pregunta editada 24º octubre 2016 в 4:18

Programación

fonts css

3º abril 2010 в 10:35

7 vistas

David Thomas · Answer 1 · 2010-04-03T10:51:55+00:00

Tal vez podrías emular un trazo de texto, usando el 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 disponible que la propiedad -webkit-text-stroke, dudo que esté disponible para la mayoría de tus usuarios, pero eso podría no ser un problema (la degradación elegante, y todo eso).

andsve · Answer 2 · 2010-04-03T10:44:21+00:00

andsve

Fuente Versión no AMP Editar

Parece que hay una propiedad 'text-stroke', pero (al menos para mí) sólo funciona en Safari.

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

17

0

Comentarios (3)

xandy · Answer 3 · 2010-04-03T10:43:03+00:00

Una vez intenté hacer esas esquinas redondeadas y las sombras paralelas con css3. Más tarde, me di cuenta de que todavía es poco compatible (Internet Explorer (s), por supuesto!)

Acabé intentando hacerlo en JS (lienzo HTML con IE Canvas), pero impacta mucho en el rendimiento (incluso en mi máquina C2D). En resumen, si realmente necesitas el efecto, considera las librerías JS (la mayoría de ellas deberían poder ejecutarse en IE6) pero no te excedas por cuestiones de rendimiento; si todavía necesitas una alternativa... podrías usar SFiR, luego PS y SFiR. CSS3 no está listo hoy.