Canvas Schriftart Attribut
Definition und Verwendung
font Attribute, um die aktuellen Schriftattribute des Textinhalts auf dem Canvas zu setzen oder zurückzugeben.
font Die Syntax der Attribute verwendet wird, ist die gleiche wie CSS font-EigenschaftGleich.
Beispiel
Schreiben Sie einen 40 Pixel großen Text auf dem Canvas, der die Schriftart "Arial" verwendet:
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";
Attribute-Wert
| Wert | Beschreibung |
|---|---|
| font-style |
Bestimmen Sie den Stil der Schriftart. Mögliche Werte:
|
| font-variant |
Bestimmen Sie die Schriftvariante. Mögliche Werte:
|
| font-weight |
Bestimmen Sie die Dicke der Schriftart. Mögliche Werte:
|
| font-size / line-height | Bestimmen Sie die Schriftgröße und den Zeilenabstand in Pixeln. |
| font-family | Bestimmen Sie die Schriftartfamilie. |
| 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 Dialogfelder. |
| small-caption | Verwenden Sie die Schriftart für die Beschriftung kleinerer Steuerelemente. |
| status-bar | Verwenden Sie die Schriftart für die Statusleiste des Fensters. |
Technische Details
| Standardwert: | 10px sans-serif |
|---|
Browser-Unterstützung
Die in der Tabelle angegebenen Zahlen geben die erste Version des Browsers an, die diese Eigenschaft vollständig unterstützt.
| 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.
