I font sul web sono essenzialmente grafica vettoriale. Questo è il motivo per cui puoi visualizzarli a 12px o 120px e rimangono nitidi e con bordi relativamente netti. Vettoriale significa che la loro forma è determinata da punti e dalla matematica per descrivere la forma, piuttosto che da dati di pixel reali. Poiché sono vettoriali, avrebbe senso se potessimo fare cose che altri programmi vettoriali (per esempio Adobe Illustrator) possono fare con il testo vettoriale, come disegnare un tratto intorno ai singoli caratteri. Bene, possiamo farlo! Esempio:
h1 { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}O stenografia:
h1 { -webkit-text-stroke: 1px black;}Potreste pensare “Fico, ma se solo alcuni browser lo supportano, se imposto il colore del mio testo a white e il mio sfondo è white, il tratto lo fa sembrare figo nei browser che lo supportano ma scompare completamente nei browser che non lo supportano!”
Una possibilità è questa:
h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}Mostra qui con @font-face font Anime Ace 2 di Nate Piekos:
Un’altra possibilità si applica solo quando è supportato:
@supports (-webkit-text-stroke: 1px black) { h1 { -webkit-text-stroke: 1px black; -webkit-text-fill-color: white; }}Supporto
Questi dati di supporto del browser sono di Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a partire da quella versione.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 49* | No | 15* | 3.1* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 89* | 86* | 2.1* | 4.0-4.1* |
Simulazione
Possiamo andare un po’ oltre non basandoci interamente sul proprietario WebKit. Possiamo usare la proprietà text-shadow (supportata anche in Firefox, Opera e IE 10) e simulare un tratto. Useremo quattro ombre, ognuna di 1px di nero senza diffusione, una in alto a destra, una in alto a sinistra, una in basso a sinistra e una in basso a destra. Rimuoveremo il -webkit-text-fill-color proprietario di WebKit in favore di color dato che ora siamo compatibili con tutti i browser. L’unica eccezione sarebbe IE9 e giù, che naturalmente si possono usare fogli di stile specifici per IE per tenerne conto.
h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Combinazione
Utilizzando sia un tratto che un’ombra può essere un grande effetto. Buttiamo su un tratto WebKit, il tratto tutto testo-ombra, così come un tratto testo-ombra più profondo.
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
Vedi la penna
Stroked Text with Alternatives di CSS-Tricks (@css-tricks)
su CodePen.
Allineamento
Se avete familiarità con Adobe Illustrator, forse sapete che potete allineare un tratto all’interno di una forma, all’esterno o centrato. Questa opzione appare così nella palette:
Per ragioni a me sconosciute, anche il testo in Illustrator può essere impostato solo sull’allineamento centrale del tratto. Una volta che si espande il testo in percorsi vettoriali regolari, però, tutte e tre le opzioni diventano disponibili. Promemoria da Sam Frysteen: aggiungi un nuovo tratto nel pannello Aspetto e spostalo sotto il tuo testo (in pratica imita l’allineamento esterno del tratto).
Solo l’allineamento esterno del testo mi sembra buono. È un peccato, sia per i CSS che per Illustrator, che il default immutabile sia centrato. La soluzione è solo quella di non impazzire troppo con lo spessore del bordo del tratto e le cose dovrebbero andare bene. Nota: la soluzione text-shadow-only non ha questo problema, ma non è nemmeno in grado di disegnare più di 1px.
paint-order permette essenzialmente di avere tratti esterni impostati, una volta che più browser lo supportano.Cosa non possiamo fare
Ci sono altre cose che i programmi di grafica vettoriale possono fare con il testo. È possibile schiacciare le lettere orizzontalmente / allungarle verticalmente. Questo tipo di trattamento del testo è quasi universalmente disapprovato, quindi non è una grande perdita il fatto di non poterlo fare. È anche possibile impostare il tipo su una linea irregolare (come intorno a un cerchio). Sarebbe certamente bello poterlo fare con il testo web. Forse potremmo impostare il testo per seguire il percorso del bordo del suo elemento genitore.
p.circular { width: 200px; height: 200px; border-radius: 100px; /* NOT REAL */ text-align: border-path;}In Illustrator, possiamo anche dire ad un tratto come gestire gli angoli acuti: arrotondati, smussati, o mitrati. Questi possono avere effetti piacevoli, non sono possibili sul web. Tuttavia, la gestione degli angoli da parte di WebKit è abbastanza carina come impostazione predefinita (qualunque essa sia), e probabilmente più carina di qualsiasi opzione in Illustrator.
Fantasie
Per la cronaca, è possibile utilizzare qualsiasi tipo di valore di colore per il colore del tratto (hex, rgba, hsla, parola chiave). Questo significa tratti trasparenti se li vuoi, che in effetti “impilano” nel senso che se i tratti si sovrappongono l’un l’altro (comune) saranno più scuri.
Per quanto riguarda l’animazione del keyframe, il colore del tratto si animerà ma la larghezza del tratto no (strano).
/* Only the color will change, not the width */@keyframes colorchange { 0% { -webkit-text-stroke: 10px red; } 100% { -webkit-text-stroke: 20px green; }}