text-strokeè una proprietà sperimentale che fornisce opzioni di decorazione del testo simili a quelle che si trovano in Adobe Illustrator o in altre applicazioni di disegno vettoriale. Attualmente non è incluso in nessuna specifica W3C o WHATWG. A partire da giugno 2013, è implementato solo dietro un -webkitprefisso del fornitore, sebbene le versioni future di Firefox e Internet Explorer possano supportare la proprietà (probabilmente con i propri prefissi).
mark ( -webkit-text-stroke: 2px red; )La text-strokeproprietà è in realtà una scorciatoia per altre due proprietà:
text-stroke-width, che prende il valore unitario (1px, 0.125em, 4in, eccetera) e descrive lo spessore dell'effetto tratto.text-stroke-color, che assume un valore di colore (hex, rgb / rgba, hsl / hsla, eccetera).
text-strokeha anche una proprietà companion text-fill-color, che sovrascriverà la colorproprietà, consentendo un grazioso fallback a un colore di testo diverso nei browser che non supportano text-stroke.
Punti di interesse
- Il tratto disegnato da
text-strokeè allineato al centro della forma del testo (come è l'impostazione predefinita in Adobe Illustrator) e attualmente non è disponibile alcuna opzione per impostare l'allineamento all'interno o all'esterno della forma. Sfortunatamente questo lo rende molto meno utilizzabile, poiché non importa cosa ora il tratto interferisca con la forma della lettera distruggendo l'intento originale del designer di caratteri. Un'impostazione sarebbe l'ideale, ma se dovessimo sceglierne una, il tratto esterno sarebbe stato molto più utile. - in Webkit,
text-strokeè animabile con transizioni e animazioni CSS, ma solo il colore del tratto, non l'ampiezza del tratto. - Un sostituto più compatibile con il browser (e probabilmente robusto) per l'
text-strokeeffetto sta usandotext-shadow, che è delineato in questo articolo CSS-Tricks.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Complicato | -webkit- |
Una nota sul supporto del browser: la tabella sopra è un riepilogo del supporto globale del browser per text-stroke: la verità è molto più complicata (ad esempio, Android supportava la proprietà nelle versioni 2.1-2.3, quindi ha rimosso il supporto nella 3.0, prima di ripristinare il supporto nella 4.0) . Per la tabella di supporto completo del browser, visitare caniuse.com/text-stroke.