Propriedade CSS text-stroke-width

A propriedade -webkit-text-stroke-width define a espessura do contorno (stroke) desenhado ao redor de cada caractere. Ela é uma das partes do recurso text-stroke: esta propriedade controla a largura do contorno, enquanto text-stroke-color controla sua cor.

O contorno do texto é pintado por cima do preenchimento normal da letra, centralizado na borda de cada glifo. Com uma largura maior, as letras ficam com aparência de contorno ou "vazadas"; com largura 0 (o padrão), nenhum contorno é desenhado. Isso o torna uma maneira popular de criar títulos de exibição em negrito, texto recortado e títulos decorativos sem precisar usar uma imagem.

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

Por que e quando usá-la

Use text-stroke-width quando quiser um efeito de contorno que permaneça nítido em qualquer tamanho e continue sendo um texto real e selecionável:

Títulos com contorno — dê a um título uma borda colorida para um visual de pôster.
Texto recortado / vazado — combine um contorno com text-fill-color: transparent para que apenas o contorno apareça e o fundo transpareça pelas letras.
Legibilidade sobre imagens — um contorno fino pode separar texto claro de um fundo movimentado, semelhante ao text-shadow, mas mais próximo ao glifo.

Informação

text-stroke-width não é uma propriedade padronizada independente. A forma padrão é o shorthand text-stroke (CSS Text Decoration Level 4). Na prática, todos os navegadores atuais ainda exigem o prefixo -webkit-, portanto use -webkit-text-stroke-width para a largura e combine com -webkit-text-stroke-color para a cor.

Pontos de atenção

Sempre defina também uma cor. Uma largura sem -webkit-text-stroke-color usa currentColor (a cor de texto do elemento), o que pode tornar o contorno invisível sobre o preenchimento. Defina ambos, ou use o shorthand text-stroke: -webkit-text-stroke: 2px #1c87c9;.
A largura cresce para dentro e para fora. O contorno é centralizado na borda do glifo, então um contorno largo em texto pequeno corrói as formas das letras e prejudica a legibilidade. Use valores maiores de font-size para contornos mais espessos.
Não é animável. Fazer a transição da largura diretamente não produz efeito.
Forneça um fallback. Navegadores sem suporte a -webkit-text-stroke simplesmente o ignoram e exibem o texto simples, portanto o resultado ainda deve ser legível sem o contorno.

Valor Inicial	0
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Não
Versão	CSS Text Decoration Module Level 4 (com prefixo de fornecedor)
Sintaxe DOM	object.style.webkitTextStrokeWidth = "1px";

Sintaxe

Valores de CSS text-stroke-width

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

Exemplo da propriedade text-stroke-width:

Diferentes unidades (px, mm) definem a espessura do contorno. Aqui, três parágrafos compartilham a mesma cor de contorno, mas usam larguras fina, média e grossa para que você possa compará-las.

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

Experimente Você Mesmo »

Resultado

Exemplo de texto vazado (recortado):

Definir text-fill-color como transparent oculta o preenchimento das letras, de modo que apenas o contorno é pintado. Este é o clássico efeito de título "somente 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: onde for suportado, você pode substituir as duas declarações -webkit-text-stroke-* pelo shorthand text-stroke, por exemplo -webkit-text-stroke: 2px #8ebf42;.

Valores

Valor	Descrição
length	Especifica a espessura do contorno.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

text-stroke — o shorthand que define a largura e a cor de uma só vez.
text-stroke-color — define a cor do contorno.
text-fill-color — controla o preenchimento das letras (use transparent para texto vazado).
text-shadow — uma forma alternativa de adicionar profundidade ou contraste ao texto.

Prática

Qual afirmação está incorreta sobre a propriedade CSS text-stroke-width?

Pode ser aplicada a todos os elementos.É uma propriedade animável.Especifica a largura do contorno.