Propiedad CSS text-stroke-width

La propiedad -webkit-text-stroke-width define el grosor del contorno (stroke) dibujado alrededor de cada carácter. Es una de las dos mitades de la función text-stroke: esta propiedad controla el ancho del contorno, mientras que text-stroke-color controla su color.

El contorno de texto se pinta encima del relleno normal de la letra, centrado en el borde de cada glifo. Con un ancho mayor, las letras parecen contorneadas o "huecas"; con un ancho de 0 (el valor predeterminado) no se dibuja ningún contorno. Esto lo convierte en una forma popular de crear encabezados de visualización en negrita, texto recortado y títulos decorativos sin necesidad de recurrir a una imagen.

h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #1c87c9;
}

Por qué y cuándo usarlo

Recurre a text-stroke-width cuando quieras un efecto de contorno que se mantenga nítido a cualquier tamaño y siga siendo texto real y seleccionable:

Encabezados contorneados — dale a un encabezado un borde de color para un aspecto de póster.
Texto recortado / hueco — combina un contorno con text-fill-color: transparent para que solo se muestre el contorno y el fondo se vea a través de las letras.
Legibilidad sobre imágenes — un contorno fino puede separar el texto claro de un fondo recargado, similar a text-shadow pero más ajustado al glifo.

Información

text-stroke-width no es una propiedad estándar independiente. La forma estándar es la abreviatura text-stroke (CSS Text Decoration Level 4). En la práctica, todos los navegadores actuales aún requieren el prefijo -webkit-, por lo que debes usar -webkit-text-stroke-width para el ancho y combinarlo con -webkit-text-stroke-color para el color.

Aspectos a tener en cuenta

Establece siempre un color también. Un ancho sin -webkit-text-stroke-color recurre a currentColor (el color de texto del elemento), por lo que el contorno puede ser invisible sobre el relleno. Establece ambos, o usa la abreviatura text-stroke: -webkit-text-stroke: 2px #1c87c9;.
El ancho crece hacia adentro y hacia afuera. El contorno está centrado en el borde del glifo, por lo que un contorno ancho sobre texto pequeño invade las formas de las letras y perjudica la legibilidad. Usa valores de font-size más grandes para contornos mayores.
No es animable. Hacer una transición del ancho directamente no tiene ningún efecto.
Proporciona un fallback. Los navegadores sin compatibilidad con -webkit-text-stroke simplemente lo ignoran y muestran el texto sin formato, por lo que el resultado debe ser legible también sin el contorno.

Valor inicial	0
Se aplica a	Todos los elementos.
Heredado	No.
Animable	No
Versión	CSS Text Decoration Module Level 4 (con prefijo de proveedor)
Sintaxis DOM	object.style.webkitTextStrokeWidth = "1px";

Sintaxis

Valores de CSS text-stroke-width

-webkit-text-stroke-width: length | initial | inherit;

Ejemplo de la propiedad text-stroke-width:

Diferentes unidades (px, mm) establecen el grosor del contorno. Aquí tres párrafos comparten el mismo color de contorno pero usan anchos fino, medio y grueso para que puedas compararlos.

Ejemplo de código CSS text-stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p, h2 {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: 1px;
      }
      .medium {
        -webkit-text-stroke-width: 3.5px;
      }
      .thick {
        -webkit-text-stroke-width: 1.3mm;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-width property example</h2>
    <p class="thin">Lorem Ipsum </p>
    <p class="medium">Lorem Ipsum</p>
    <p class="thick">Lorem Ipsum</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de texto hueco (recortado):

Establecer text-fill-color en transparent oculta el relleno de la letra, de modo que solo se pinta el contorno. Este es el clásico efecto de titular "solo contorno".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 5em;
        font-family: sans-serif;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Nota: donde esté disponible, puedes reemplazar las dos declaraciones -webkit-text-stroke-* con la abreviatura text-stroke, por ejemplo -webkit-text-stroke: 2px #8ebf42;.

Valores

Valor	Descripción
length	Especifica el grosor del contorno.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

text-stroke — la abreviatura que establece el ancho y el color a la vez.
text-stroke-color — establece el color del contorno.
text-fill-color — controla el relleno de las letras (usa transparent para texto hueco).
text-shadow — una forma alternativa de añadir profundidad o contraste al texto.

Práctica

¿Cuál de las siguientes afirmaciones sobre la propiedad CSS text-stroke-width es incorrecta?

Se puede aplicar a todos los elementos.Es una propiedad animable.Especifica el ancho del contorno.