Propriété de la police de canevas HTML

❮ Référence de canevas HTML

Exemple

Écrivez un texte de 30 pixels de haut sur la toile, en utilisant la police "Arial":

Votre navigateur ne prend pas en charge la balise HTML5 canva.

JavaScript :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.

Property
font Yes 9.0 Yes Yes Yes

Définition et utilisation

La propriété font définit ou renvoie les propriétés de police actuelles pour le contenu du texte sur le canevas.

La propriété font utilise la même syntaxe que la propriété CSS font .

Valeur par défaut: 10px sans empattement
Syntaxe JavaScript : context .font="italic small-caps bold 12px arial" ;

Valeurs de propriété

Values Description Play it
font-style Specifies the font style. Possible values:
  • normal
  • italic
  • oblique
font-variant Specifies the font variant. Possible values:
  • normal
  • small-caps
font-weight Specifies the font weight. Possible values:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size/line-height Specifies the font size and the line-height, in pixels
font-family Specifies the font family
caption Use the font captioned controls (like buttons, drop-downs, etc.)
icon Use the font used to label icons
menu Use the font used in menus (drop-down menus and menu lists)
message-box Use the font used in dialog boxes
small-caption Use the font used for labeling small controls
status-bar Use the fonts used in window status bar

❮ Référence de canevas HTML