HTML Canvas Font Attribut
Definition und Verwendung
font Attribut, um die aktuellen Font-Attribute des Textinhalts auf dem Canvas zu setzen oder zurückzugeben.
font Die Syntax der Verwendung des Attributs ist gleich dem CSS font Eigenschaftgleich
Beispiel
Schreiben Sie einen 40 Pixel hohen Text auf dem Canvas, die verwendete Schriftart ist "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
Syntax
context.font="italic small-caps bold 12px arial";
Attributswert
| Wert | Beschreibung |
|---|---|
| font-style |
Bestimmt den Stil der Schriftart. Mögliche Werte:
|
| font-variant |
Bestimmt die Variante der Schriftart. Mögliche Werte:
|
| font-weight |
Bestimmt die Dicke des Textes der Schriftart. Mögliche Werte:
|
| font-size / line-height | Bestimmt die Schriftgröße und den Zeilenabstand in Pixel. |
| font-family | Bestimmt die Zeichenserie. |
| caption | Verwenden Sie die Schriftart für Titelsteuerelemente (z.B. Schaltflächen, Dropdown-Listen). |
| icon | Verwenden Sie die Schriftart für Symbole. |
| menu | Verwenden Sie die Schriftart für Menüs (Dropdown-Listen und Menülisten). |
| message-box | Verwenden Sie die Schriftart für Dialogfenster. |
| small-caption | Verwenden Sie die Schriftart für kleine Steuerelemente. |
| status-bar | Verwenden Sie die Schriftart für die Statusleiste des Fensters. |
Technische Details
| Standardwert: | 10px sans-serif |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Version der Browser an, die diese Eigenschaft vollständig unterstützen.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
