Fonts na Web são essencialmente gráficos baseados em vectores. É por isso que se podem mostrar a 12px ou 120px e permanecem estaladiços e relativamente afiados. Vectorial significa que a sua forma é determinada por pontos e matemática para descrever a forma, em vez de dados reais de pixel. Porque são vectoriais, faria sentido se pudéssemos fazer coisas que outros programas vectoriais (por exemplo Adobe Illustrator) podem fazer com texto vectorial, como desenhar um traço em torno dos caracteres individuais. Bem, nós podemos! Exemplo:
h1 { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}Or shorthand:
h1 { -webkit-text-stroke: 1px black;} Você pode estar a pensar “Fixe, mas se apenas alguns browsers suportam isto, se eu definir a cor do meu texto para white e o meu fundo é white, o traço faz com que pareça fixe em browsers de suporte mas desaparece completamente em browsers não suportados!”
Uma possibilidade é esta:
h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}Mostrado aqui com a fonte @font-face Anime Ace 2 de Nate Piekos:
Outra possibilidade só se aplica quando suportado:
@supports (-webkit-text-stroke: 1px black) { h1 { -webkit-text-stroke: 1px black; -webkit-text-fill-color: white; }}Suporte
Estes dados de suporte do navegador são da Caniuse, que tem mais detalhes. Um número indica que o navegador suporta a funcionalidade nessa versão e acima.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 49** | No | 15** | 3.1* |
Móvel / Tablet
| Android Chrome | |||
|---|---|---|---|
| 89* | 86** | 2.1* | 4.0-4.1* |
Simulação
Podemos levar isto um pouco mais longe, não confiando inteiramente na propriedade do WebKit. Podemos utilizar a propriedade text-shadow (suportada em Firefox, Opera, e IE 10 também) e simular um golpe. Usaremos quatro sombras, cada uma com 1px de offset de negro sem propagação, uma para cima à direita, outra para cima à esquerda, outra para baixo à esquerda, e outra para baixo à direita. Vamos usar o WebKit proprietário -webkit-text-fill-color a favor de color uma vez que agora somos compatíveis com o cross-browser. O único obstáculo seria o IE9 e para baixo, o qual, claro, pode usar folhas de estilo específicas do IE para contabilizar.
h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Combinando
Usar tanto um traço como uma sombra pode ser um grande efeito. Vamos dar um traço WebKit, o traço de sombras de texto, bem como um traço de sombras de texto mais profundo.
h1 { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Demo
Veja a Caneta
Texto com Alternativas por CSS-Truques (@css-tricks)
sobre CodePen.
Alinhamento
Se estiver familiarizado com o Adobe Illustrator, pode saber que pode alinhar um traço no interior de uma forma, no exterior, ou centrado. Essa opção parece-se com esta na paleta:
Por razões que desconheço, o texto no Illustrator só pode ser definido para o alinhamento do traço central também. No entanto, uma vez expandido o texto em caminhos vectoriais regulares, as três opções tornam-se disponíveis. Lembrete de Sam Frysteen: adicione um novo traço no painel Appearance e desloque-o abaixo do seu texto (basicamente imita o alinhamento fora do traço).
Apenas fora do alinhamento do traçado do texto me parece algo de bom. É lamentável, tanto para o CSS como para o Illustrator, que o padrão imutável esteja centrado. A solução é simplesmente não enlouquecer demasiado com a espessura da borda do seu traço e as coisas devem ficar bem. Nota: a solução apenas de sombras de texto não tem este problema, mas também é incapaz de traçar mais de 1px.
paint-order propriedade permite-lhe ter traços exteriores, uma vez mais os browsers suportam-no.O que não podemos fazer
Existem outras coisas que os programas gráficos vectoriais podem fazer com o texto. É possível esticar a letra horizontalmente / esticar verticalmente. Este tipo de tratamento de texto é quase universalmente desaprovado, pelo que não há grandes perdas que não possamos fazer isso. Também se pode colocar o tipo numa linha irregular (como em torno de um círculo). Seria certamente fixe fazer isto com texto na web. Talvez pudéssemos definir texto para seguir o caminho de fronteira do seu elemento pai.
p.circular { width: 200px; height: 200px; border-radius: 100px; /* NOT REAL */ text-align: border-path;}No Illustrator, também podemos dizer a um traço como lidar com cantos afiados: arredondados, biselados, ou mitrados. Estes podem ter efeitos agradáveis, não são possíveis na web. Contudo, o manuseamento de cantos do WebKit é bastante agradável no seu padrão (seja ele qual for), e indiscutivelmente mais agradável do que qualquer uma das opções no Illustrator.
Fancies
Para o registo, pode usar qualquer tipo de valor de cor para a cor do traço (hex, rgba, hsla, palavra-chave). Isto significa traços transparentes se os quiser, que de facto “empilham”, na medida em que se os traços se sobrepõem (comuns), serão mais escuros.
Até à animação do quadro-chave, a cor dos traços animará mas a largura dos traços não (estranho).
/* Only the color will change, not the width */@keyframes colorchange { 0% { -webkit-text-stroke: 10px red; } 100% { -webkit-text-stroke: 20px green; }}