Propriété font du Canvas
Exemple
Écrivez un texte de 30px de hauteur sur le canvas en utilisant la police "Arial" :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50); Description
La propriété font définit ou renvoie les propriétés de police pour le texte du canvas.
La propriété font utilise la même syntaxe que la propriété font CSS .
La valeur par défaut est 10px sans-serif.
Voir aussi :
La propriété fillStyle (Définir la couleur/gradient du texte)
La propriété textAlign (Définir l'alignement du texte)
La propriété textBaseline (Définir la ligne de base du texte)
La méthode fillText() (Dessiner le texte)
La méthode strokeText() (Dessiner le texte)
Syntaxe
| context .font = "italic small-caps bold 12px arial" |
Valeurs de propriété
| Valeurs | Description | Jouez-le |
|---|---|---|
| font-style |
| |
| font-variant |
| |
| font-weight |
| |
| font-size | La taille de la police en pixels | |
| font-family | La famille de polices | |
| caption | Utilisez la police utilisée dans les boutons | |
| icon | Utilisez la police utilisée pour étiqueter les icônes | |
| menu | Utilisez la police utilisée dans les menus | |
| message-box | Utilisez la police utilisée dans les boîtes de dialogue | |
| small-caption | Utilisez la police utilisée pour étiqueter les petits contrôles | |
| status-bar | Utilisez les polices utilisées dans la barre d'état de la fenêtre |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
font est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |