HTML Referenzhandbuch

HTML-Tag-Übersicht

HTML canvas font-Eigenschaft

font ist Canvas 2D API beschreibt die Attribute der aktuellen Font-Style, wenn Text gezeichnet wird. Verwendet wie die CSS Font-Regeln gleiche Zeichenkettengrößen.

HTML canvas Reference Manual

Online-Beispiel

Schreiben Sie einen Text auf die Leinwand 30 Pixel Text, der die Schriftart "Arial" verwendet:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas font-Eigenschaft verwenden-Grund教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Grund教程　oldtoolbag.com",10,50);
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome und Safari unterstützen Font Eigenschaft.

Hinweis:Internet Explorer 8 frühere Versionen unterstützen den <canvas>-Element nicht.

Definition und Verwendung

setzt oder gibt die aktuellen Font-Eigenschaften des Textinhalts auf der Leinwand zurück.

Die Syntax der Font-Eigenschaft entspricht CSS Font-Eigenschaft identisch.

Standardwert:	10px sans-serif
JavaScript Syntax:	context.font="italic small-caps bold 12px arial";

Attribute Value

Value	Description
font-style	Specify the font style. Possible values: normal italic oblique
font-variant	Specify the font variant. Possible values: normal small-caps
font-weight	Specify the font weight. Possible values: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	Specify the font size and line height in pixels.
font-family	Specify the font family.
caption	Use the font for title controls (such as buttons, drop-down lists, etc.).
icon	Use the font for marking icons.
menu	Use the font for menus (drop-down lists and menu lists).
message-box	Use the font for dialog boxes.
small-caption	Use the font for marking small controls.
status-bar	Use the font for the window status bar.

HTML canvas Reference Manual

HTML: <template> Tag