Manuale di riferimento HTML

Completo della guida HTML

Proprietà font canvas HTML

La proprietà font è un attributo dell'API Canvas 2D che descrive lo stile di carattere attuale utilizzato per disegnare il testo. Utilizza valori di stringa simili a quelli specificati nelle specifiche CSS font.

Manuale di riferimento per HTML canvas

Esempio online

Scrivi un testo di 30 pixel su una superficie, utilizzando il carattere "Arial":

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo della proprietà font canvas HTML - Lezione di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Lezione di base oldtoolbag.com",10,50);
</script>
</body>
</html>

Prova a vedere ‹/›

Compatibilità dei browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano la proprietà font proprietà.

Attenzione:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Imposta o restituisce le proprietà di carattere attuali del contenuto del testo sullo schermo.

La sintassi della proprietà font è simile a Proprietà font CSS uguali.

Valore predefinito:	10px sans-serif
Sintassi JavaScript:	context.font="italic small-caps bold 12px arial";

Valore dell'attributo

Valore	Descrizione
font-style	Specificare lo stile del tipo di carattere. Valori possibili: normale italic obliquo
font-variant	Specificare la variante del tipo di carattere. Valori possibili: normale in minuscolo maiuscolo
font-weight	Specificare la spessore del tipo di carattere. Valori possibili: normale grasso più spesso più leggero 100 200 300 400 500 600 700 800 900
font-size/line-height	Specificare la dimensione e l'altezza della riga, in pixel.
font-family	Specificare la famiglia del carattere.
caption	Utilizzare il tipo di carattere per i controlli di titolo (ad esempio, pulsanti, elenchi a discesa, ecc.).
icon	Utilizzare il tipo di carattere per gli icone.
menu	Utilizzare il tipo di carattere per i menu (elenchi a discesa e elenchi di menu).
message-box	Utilizzare il tipo di carattere per i dialoghi.
small-caption	Utilizzare il tipo di carattere per i controlli piccoli.
status-bar	Utilizzare il tipo di carattere per la barra di stato della finestra.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta