Propiedad CSS text-stroke

La propiedad text-stroke es una propiedad experimental que proporciona opciones de decoración para el texto. Es una abreviatura de las siguientes propiedades:

Existe la propiedad text-fill-color, que sobrescribe la propiedad color, lo que permite una alternativa elegante a un color de texto diferente en los navegadores que no admiten la propiedad text-stroke.

Puedes elegir colores aquí: Colores HTML.

Las fuentes web suelen basarse en gráficos vectoriales, lo que significa que la forma está determinada por matemáticas y puntos en lugar de datos de píxeles. Al ser vectoriales, podemos hacer todo lo que se puede hacer con texto vectorial en otros programas vectoriales. Por ejemplo, podemos agregar un trazo a ciertos caracteres.

advertencia
La propiedad text-stroke solo se utiliza con el prefijo de proveedor -webkit-. Esta propiedad no es estándar. No funciona para todos los usuarios. Hay incompatibilidades entre las implementaciones y el comportamiento puede cambiar en el futuro.

Valor inicial	0 currentColor
Se aplica a	Todos los elementos.
Heredable	Sí.
Animable	Sí.
Versión	Estándar de compatibilidad
Sintaxis DOM	object.style.textStroke = "1px #666";

Sintaxis

Valores de CSS text-stroke

css

text-stroke: length | color | initial | inherit;

Ejemplo de la propiedad text-stroke:

Ejemplo de código CSS text-stroke

html

<!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>

Try it Yourself »

Resultado

Ejemplo de la propiedad text-stroke con múltiples valores:

Ejemplo de múltiples valores CSS text-stroke

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
length	Especifica el grosor del trazo.
color	Especifica el color del trazo. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla().
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

La propiedad text-stroke es una abreviatura de las siguientes propiedades:

text-stroke-style, text-stroke-colortext-stroke-width, text-stroke-colortext-stroke-width, text-stroke-styletext-stroke-style, text-stroke-type

Propiedad CSS text-stroke ​

Sintaxis ​

Ejemplo de la propiedad text-stroke: ​

Resultado ​

Ejemplo de la propiedad text-stroke con múltiples valores: ​

Valores ​