CSS de texto de trazo: la guía definitiva

Siempre que pienso en texto acariciado en la web pienso: no.

Existe -webkit-text-strokeen CSS para esto, pero coloca ese trazo en el medio del contorno vectorial de los caracteres, asegurando absolutamente que el carácter no se vea bien. Solo mira esto en Chrome o Safari. Bruto. Si vas a hacerlo, al menos coloca una capa del tipo correcto encima para que tenga su integridad original. E incluso entonces, bueno, no es estándar y no obtienes soporte para varios navegadores.

John Negoita cubre los trazos de texto de muchas otras maneras. Otra forma de falsificarlo es usarlo text-shadowen múltiples direcciones.

Cuatro formas, como la figura de arriba, no suelen ser suficientes, por lo que se vuelve matemático con ellas. SVG es capaz de realizar trazos, lo que uno pensaría que sería mucho más inteligente, pero tiene exactamente el mismo problema que CSS con el trazo a horcajadas, solo que con un poco más de control.

Probablemente evitaría el texto con trazos en la web en general, a menos que sea algo único, en cuyo caso lo convertiría en SVG en el software de diseño, falsificaría el trazo y lo usaría como archivo background-image.

Es posible lucir genial.

Enlace directo →