Propiedad CSS text-stroke
Usa la propiedad CSS text-stroke para definir el ancho y el color del contorno. Consulta los valores y practica con ejemplos.
La propiedad text-stroke dibuja un contorno (trazo) alrededor de cada carácter del texto, lo que te permite controlar el borde de los glifos en lugar de simplemente su relleno. Es una abreviatura de dos propiedades individuales:
- text-stroke-width — el grosor del contorno.
- text-stroke-color — el color del contorno.
Esta página cubre la sintaxis, los valores aceptados, una estrategia de reserva para navegadores no compatibles y ejemplos ejecutables.
Por qué usar text-stroke
Las fuentes web generalmente están construidas a partir de gráficos vectoriales: la forma de un glifo se describe mediante curvas y puntos matemáticos, no por píxeles. Como el contorno es un camino geométrico real, el navegador puede trazar a lo largo de ese camino, exactamente como los programas de dibujo vectorial pueden añadir un trazo a una figura. text-stroke expone esa capacidad en CSS, lo que resulta útil para encabezados de visualización grandes, logotipos o letras "contorneadas" donde un text-shadow no daría un borde nítido.
Un patrón común es un carácter solo de contorno: establece text-fill-color en transparent para que el interior de cada glifo quede vacío y solo sea visible el trazo.
text-stroke no es estándar. En la práctica debes escribirlo con el prefijo -webkit- (-webkit-text-stroke). Las implementaciones difieren ligeramente entre navegadores y el comportamiento puede cambiar en el futuro, así que proporciona siempre una alternativa de reserva.
Compatibilidad con navegadores y reserva
Como la compatibilidad no está garantizada, nunca confíes únicamente en el trazo. La propiedad text-fill-color anula la propiedad regular color solo en los navegadores que la reconocen, por lo que la técnica habitual es:
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}Los navegadores sin -webkit-text-fill-color ignoran esas dos líneas y muestran el texto #1c87c9 simple. Puedes elegir colores de la referencia de colores HTML.
| Valor inicial | 0 currentColor (es decir, ancho cero) |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | No (los valores individuales text-stroke-width y text-stroke-color sí lo son). |
| Versión | Compatibility Standard |
| Sintaxis DOM | object.style.webkitTextStroke = "1px #666"; |
Sintaxis
Valores de CSS text-stroke
-webkit-text-stroke: <width> <color> | initial | inherit;Las dos partes son independientes del orden y cualquiera de ellas puede omitirse. El ancho acepta cualquier unidad de longitud CSS (px, pt, em, cm, …); el color acepta cualquier valor de color CSS.
Ejemplo de la propiedad text-stroke:
Ejemplo de código CSS text-stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Resultado
Ejemplo de la propiedad text-stroke con múltiples valores:
Ejemplo de CSS text-stroke con múltiples valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
}
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
}
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Aquí 1px, 2pt y 0.1cm son todas unidades de ancho válidas, por lo que los tres párrafos obtienen contornos progresivamente más gruesos.
Valores
| Valor | Descripción |
|---|---|
| length | Especifica el grosor del trazo. |
| color | Especifica el color del trazo. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |