Proprietà text-stroke-width
La proprietà text-stroke-width imposta lo spessore del contorno
dei caratteri del testo o il suo tratto. La proprietà
accetta valori specificati in unità di misura
come px, em, rem, ecc. È anche
possibile impostare i seguenti valori: thin (linea sottile),
medium (linea media) e thick
(linea spessa).
Sintassi
selettore {
text-stroke-width: numero o thin o medium o thick;
}
Esempio
Assegniamo ai caratteri del nostro testo un contorno sottile:
<p>
Text
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: thin;
text-stroke-width: thin;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
Esempio
E ora cambiamo il contorno sottile in uno medio:
<p>
Text
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: medium;
text-stroke-width: medium;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
Esempio
Assegniamo ai caratteri del nostro testo un contorno spesso:
<p>
Text
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: thick;
text-stroke-width: thick;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
Esempio
Assegniamo anche ai caratteri del nostro testo
un contorno di 2px:
<p>
Text
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: 2px;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
Vedi anche
-
la proprietà
text-stroke,
che imposta il contorno del testo -
la proprietà
text-stroke-color,
che imposta il colore del contorno del testo