Proprietà CSS text-stroke
Usa la proprietà CSS text-stroke per specificare la larghezza e il colore del contorno. Scopri i valori e pratica con gli esempi.
La proprietà text-stroke disegna un contorno (un tratto) intorno a ogni carattere del testo, offrendoti il controllo sul bordo dei glifi anziché solo sul loro riempimento. È una proprietà shorthand per due proprietà longhand:
- text-stroke-width — lo spessore del contorno.
- text-stroke-color — il colore del contorno.
Questa pagina tratta la sintassi, i valori accettati, una strategia di fallback per i browser non supportati e esempi eseguibili.
Perché usare text-stroke
I font web sono solitamente costruiti da grafica vettoriale: la forma di un glifo è descritta da curve matematiche e punti, non da pixel. Poiché il contorno è un percorso geometrico reale, il browser può dipingere lungo quel percorso — esattamente come i programmi di disegno vettoriale possono aggiungere un tratto a una forma. text-stroke espone questa capacità in CSS, ed è utile per intestazioni di grandi dimensioni, loghi o testi "delineati" dove un text-shadow non darebbe un bordo netto.
Un pattern comune è il carattere solo delineato: imposta text-fill-color su transparent in modo che l'interno di ogni glifo sia vuoto e solo il contorno sia visibile.
text-stroke non è uno standard. In pratica devi scriverla con il prefisso -webkit- (-webkit-text-stroke). Le implementazioni differiscono leggermente tra i browser e il comportamento potrebbe cambiare in futuro, quindi fornisci sempre un fallback.
Supporto browser e fallback
Poiché il supporto non è garantito, non fare mai affidamento solo sul contorno. La proprietà text-fill-color sovrascrive la normale proprietà color solo nei browser che la supportano, quindi la tecnica abituale è:
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}I browser senza -webkit-text-fill-color ignorano quelle due righe e visualizzano il testo semplice #1c87c9. Puoi scegliere i colori dal riferimento HTML colors.
| Valore iniziale | 0 currentColor (ovvero larghezza zero) |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No (le proprietà longhand text-stroke-width e text-stroke-color lo sono). |
| Versione | Compatibility Standard |
| Sintassi DOM | object.style.webkitTextStroke = "1px #666"; |
Sintassi
Valori CSS text-stroke
-webkit-text-stroke: <width> <color> | initial | inherit;Le due parti sono indipendenti dall'ordine e ognuna può essere omessa. La larghezza accetta qualsiasi unità CSS length (px, pt, em, cm, …); il colore accetta qualsiasi valore di colore CSS.
Esempio della proprietà text-stroke:
Esempio di codice 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>Risultato
Esempio della proprietà text-stroke con valori multipli:
Esempio CSS text-stroke con valori multipli
<!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>Qui 1px, 2pt e 0.1cm sono tutte unità di larghezza valide, quindi i tre paragrafi ottengono contorni progressivamente più spessi.
Valori
| Valore | Descrizione |
|---|---|
| length | Specifica lo spessore del contorno. |
| color | Specifica il colore del contorno. Si possono usare nomi di colori, codici colore esadecimali, rgb(), rgba(), hsl(), hsla(). |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |