text-strokees una propiedad experimental que proporciona opciones de decoración de texto similares a las que se encuentran en Adobe Illustrator u otras aplicaciones de dibujo vectorial. Actualmente no está incluido en ninguna especificación W3C o WHATWG. A partir de junio de 2013, solo se implementa detrás de un -webkitprefijo de proveedor, aunque las versiones futuras de Firefox e Internet Explorer pueden admitir la propiedad (probablemente con sus propios prefijos).
mark ( -webkit-text-stroke: 2px red; )La text-strokepropiedad es en realidad una abreviatura de otras dos propiedades:
text-stroke-width, que toma un valor unitario (1px, 0.125em, 4in, etcétera) y describe el grosor del efecto de trazo.text-stroke-color, que toma un valor de color (hex, rgb / rgba, hsl / hsla, etcétera).
text-stroketambién tiene una propiedad complementaria text-fill-color, que anulará la colorpropiedad, lo que permitirá un retroceso elegante a un color de texto diferente en los navegadores que no admiten text-stroke.
Puntos de interés
- El trazo dibujado por
text-strokeestá alineado con el centro de la forma del texto (como es el predeterminado en Adobe Illustrator), y actualmente no hay ninguna opción para establecer la alineación hacia el interior o el exterior de la forma. Desafortunadamente, esto hace que sea mucho menos utilizable, ya que no importa ahora, el trazo interfiere con la forma de la letra y destruye la intención original del diseñador de tipos. Un ajuste sería ideal, pero si tuviéramos que elegir uno, el trazo exterior habría sido mucho más útil. - en Webkit,
text-strokees animable con transiciones y animaciones CSS, pero solo el color del trazo, no el ancho del trazo. - Se
text-strokeutiliza un sustituto más compatible con el navegador (y posiblemente robusto) para el efectotext-shadow, que se describe en este artículo de Trucos CSS.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Complicado | -webkit- |
Una nota sobre la compatibilidad con el navegador: la tabla anterior es un resumen de la compatibilidad general con el navegador para text-stroke: la verdad es mucho más complicada (por ejemplo, Android admitió la propiedad en las versiones 2.1-2.3, luego eliminó la compatibilidad en 3.0, antes de restaurar la compatibilidad en 4.0) . Para ver la tabla completa de compatibilidad con el navegador, visite caniuse.com/text-stroke.