text-strokeé uma propriedade experimental que fornece opções de decoração de texto semelhantes às encontradas no Adobe Illustrator ou outros aplicativos de desenho vetorial. Atualmente, não está incluído em nenhuma especificação W3C ou WHATWG. Em junho de 2013, ele foi implementado apenas por trás de um -webkitprefixo do fornecedor, embora versões futuras do Firefox e do Internet Explorer possam oferecer suporte à propriedade (provavelmente com seus próprios prefixos).
mark ( -webkit-text-stroke: 2px red; )A text-strokepropriedade é, na verdade, uma abreviação de duas outras propriedades:
text-stroke-width, que assume o valor unitário (1px, 0,125em, 4in, etc.) e descreve a espessura do efeito de traço.text-stroke-color, que assume um valor de cor (hex, rgb / rgba, hsl / hsla, etc.).
text-stroketambém tem uma propriedade complementar,, text-fill-colorque substituirá a colorpropriedade, permitindo um fallback elegante para uma cor de texto diferente em navegadores incompatíveis text-stroke.
Pontos de interesse
- O traço desenhado por
text-strokeé alinhado ao centro da forma do texto (como é o padrão no Adobe Illustrator), e atualmente não há opção para definir o alinhamento para dentro ou fora da forma. Infelizmente, isso o torna muito menos utilizável, pois não importa o que aconteça agora, o traço interfere com a forma da letra, destruindo a intenção do designer de tipo original. Uma configuração seria ideal, mas se tivéssemos que escolher uma, o toque externo teria sido muito mais útil. - no Webkit,
text-strokeé animável com transições e animações CSS - mas apenas a cor do traço, não a largura do traço. - Um substituto mais compatível com o navegador (e indiscutivelmente robusto) para o
text-strokeefeito é o usotext-shadow, que é descrito neste artigo CSS-Tricks.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Complicado | -webkit- |
Uma observação sobre o suporte do navegador: a tabela acima é um resumo do suporte geral do navegador para text-stroke- a verdade é muito mais complicada (por exemplo, o Android suportava a propriedade nas versões 2.1-2.3, depois removeu o suporte na 3.0, antes de restaurar o suporte na 4.0) . Para obter a tabela completa de suporte para navegadores, visite caniuse.com/text-stroke.