Propriedade CSS text-stroke
Use a propriedade CSS text-stroke para definir a largura e a cor do contorno. Veja os valores e pratique com exemplos.
A propriedade text-stroke desenha um contorno (stroke) ao redor de cada caractere do texto, dando controle sobre a borda dos glifos em vez de apenas seu preenchimento. É uma propriedade abreviada de duas propriedades individuais:
- text-stroke-width — a espessura do contorno.
- text-stroke-color — a cor do contorno.
Esta página aborda a sintaxe, os valores aceitos, uma estratégia de fallback para navegadores sem suporte e exemplos executáveis.
Por que usar text-stroke
As fontes web são geralmente construídas a partir de gráficos vetoriais: a forma de um glifo é descrita por curvas e pontos matemáticos, não por pixels. Como o contorno é um caminho geométrico real, o navegador pode pintá-lo — exatamente como programas de desenho vetorial adicionam um stroke a uma forma. O text-stroke expõe essa capacidade no CSS, o que é útil para títulos de exibição grandes, logotipos ou letras "contornadas" onde um text-shadow não forneceria uma borda nítida.
Um padrão comum é um caractere apenas com contorno: defina text-fill-color como transparent para que o interior de cada glifo fique vazio e apenas o contorno seja visível.
text-stroke não é uma propriedade padrão. Na prática, você deve escrevê-la com o prefixo -webkit- (-webkit-text-stroke). As implementações diferem ligeiramente entre os navegadores e o comportamento pode mudar no futuro, portanto, sempre forneça um fallback.
Suporte a navegadores e fallback
Como o suporte não é garantido, nunca dependa apenas do contorno. A propriedade text-fill-color substitui a propriedade color regular somente em navegadores que a reconhecem, portanto a técnica usual é:
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}Navegadores sem -webkit-text-fill-color ignoram essas duas linhas e renderizam o texto #1c87c9 simples. Você pode escolher cores na referência de cores HTML.
| Valor Inicial | 0 currentColor (ou seja, largura zero) |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não (as propriedades individuais text-stroke-width e text-stroke-color são). |
| Versão | Compatibility Standard |
| Sintaxe DOM | object.style.webkitTextStroke = "1px #666"; |
Sintaxe
Valores de CSS text-stroke
-webkit-text-stroke: <width> <color> | initial | inherit;As duas partes são independentes de ordem e qualquer uma pode ser omitida. A largura aceita qualquer unidade CSS de comprimento (px, pt, em, cm, …); a cor aceita qualquer valor de cor CSS.
Exemplo da propriedade text-stroke:
Exemplo 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
Exemplo da propriedade text-stroke com múltiplos valores:
Exemplo de CSS text-stroke com múltiplos 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>Aqui 1px, 2pt e 0.1cm são todas unidades de largura válidas, de modo que os três parágrafos recebem contornos progressivamente mais espessos.
Valores
| Valor | Descrição |
|---|---|
| length | Especifica a espessura do contorno. |
| color | Especifica a cor do contorno. Nomes de cores, códigos de cores hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |