Proprietà CSS text-stroke-width

La proprietà -webkit-text-stroke-width imposta lo spessore del contorno (tratto) disegnato attorno a ogni carattere. È una delle due metà della funzionalità text-stroke: questa proprietà controlla la larghezza del contorno, mentre text-stroke-color ne controlla il colore.

Il tratto del testo viene disegnato sopra il riempimento normale della lettera, centrato sul bordo di ogni glifo. Con una larghezza maggiore le lettere appaiono delineate o "vuote"; con larghezza 0 (il valore predefinito) non viene disegnato alcun tratto. Questo la rende un metodo popolare per creare intestazioni decorative in grassetto, testo knockout e titoli decorativi senza ricorrere a un'immagine.

h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #1c87c9;
}

Perché e quando usarla

Ricorri a text-stroke-width quando vuoi un effetto contorno che rimanga nitido a qualsiasi dimensione e che resti testo reale e selezionabile:

Intestazioni delineate — dai a un'intestazione un bordo colorato per un aspetto da manifesto.
Testo knockout / cavo — combina un tratto con text-fill-color: transparent in modo che sia visibile solo il contorno e lo sfondo trasparisca attraverso le lettere.
Leggibilità sulle immagini — un tratto sottile può separare il testo chiaro da uno sfondo affollato, simile a text-shadow ma più aderente al glifo.

Informazione

text-stroke-width non è una proprietà standardizzata autonoma. La forma standard è la proprietà abbreviata text-stroke (CSS Text Decoration Level 4). In pratica ogni browser attuale richiede ancora il prefisso -webkit-, quindi usa -webkit-text-stroke-width per la larghezza e abbinala a -webkit-text-stroke-color per il colore.

Aspetti da tenere a mente

Imposta sempre anche un colore. Una larghezza senza -webkit-text-stroke-color ricade su currentColor (il colore del testo dell'elemento), quindi il tratto può risultare invisibile rispetto al riempimento. Impostali entrambi, oppure usa la proprietà abbreviata text-stroke: -webkit-text-stroke: 2px #1c87c9;.
La larghezza si espande verso l'interno e verso l'esterno. Il tratto è centrato sul bordo del glifo, quindi un tratto ampio su testo piccolo erode le forme delle lettere e compromette la leggibilità. Usa valori di font-size più grandi per tratti più spessi.
Non è animabile. La transizione diretta della larghezza non produce alcun effetto.
Fornisci un fallback. I browser che non supportano -webkit-text-stroke lo ignorano semplicemente e mostrano il testo normale, quindi il risultato dovrebbe rimanere leggibile anche senza il tratto.

Valore iniziale	0
Si applica a	Tutti gli elementi.
Ereditato	No.
Animabile	No
Versione	CSS Text Decoration Module Level 4 (con prefisso vendor)
Sintassi DOM	object.style.webkitTextStrokeWidth = "1px";

Sintassi

Valori CSS text-stroke-width

-webkit-text-stroke-width: length | initial | inherit;

Esempio della proprietà text-stroke-width:

Unità diverse (px, mm) impostano tutte lo spessore del tratto. Qui tre paragrafi condividono lo stesso colore del tratto ma usano larghezze sottile, media e spessa per permettere il confronto.

Esempio di codice CSS text-stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p, h2 {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: 1px;
      }
      .medium {
        -webkit-text-stroke-width: 3.5px;
      }
      .thick {
        -webkit-text-stroke-width: 1.3mm;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-width property example</h2>
    <p class="thin">Lorem Ipsum </p>
    <p class="medium">Lorem Ipsum</p>
    <p class="thick">Lorem Ipsum</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio di testo cavo (knockout):

Impostando text-fill-color su transparent si nasconde il riempimento della lettera, in modo che venga dipinto solo il tratto. Questo è il classico effetto titolo "solo contorno".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 5em;
        font-family: sans-serif;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Nota: dove è supportata, puoi sostituire le due dichiarazioni -webkit-text-stroke-* con la proprietà abbreviata text-stroke, ad esempio -webkit-text-stroke: 2px #8ebf42;.

Valori

Valore	Descrizione
length	Specifica lo spessore del tratto.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dal suo elemento genitore.

Proprietà correlate

text-stroke — la proprietà abbreviata che imposta larghezza e colore in una volta.
text-stroke-color — imposta il colore del tratto.
text-fill-color — controlla il riempimento delle lettere (usa transparent per il testo cavo).
text-shadow — un metodo alternativo per aggiungere profondità o contrasto al testo.

Esercitati

Pratica

Quale affermazione sulla proprietà CSS text-stroke-width è errata?

Può essere applicata a tutti gli elementi.È una proprietà animabile.Specifica la larghezza del tratto.