1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: CanvasRenderingContext2D.font
slug: Web/API/CanvasRenderingContext2D/font
tags:
- API
- Canvas
- CanvasRenderingContext2D
translation_of: Web/API/CanvasRenderingContext2D/font
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong> 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。 使用和 <a href="/en-US/docs/Web/CSS/font" title="en/CSS/font">CSS font</a> 规范相同的字符串值。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var>
</pre>
<h3 id="选项">选项</h3>
<dl>
<dt><code>value</code></dt>
<dd>符合CSS {{cssxref("font")}} 语法的{{domxref("DOMString")}} 字符串。默认字体是 10px sans-serif。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用自定义字体" name="使用自定义字体">使用自定义字体</h3>
<p>这个例子使用 <code>font</code> 属性设置了不同的字体大小和字体种类。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
</pre>
<h4 id="结果">结果</h4>
<div class="hidden">
<h2 id="Playable_code">Playable_code</h2>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="编辑" />
<input id="reset" type="button" value="重置" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);</textarea>
</pre>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p>
<h2 id="sect1"></h2>
<h3 id="使用CSS字体加载API加载字体">使用CSS字体加载API加载字体</h3>
<p>借助{{domxref("FontFace")}} API的帮助，您可以在画布中使用字体之前显式加载字体。</p>
<pre>let f = new FontFace('test', 'url(x)');
f.load().then(function() {
// Ready to use the font in a canvas context
});</pre>
<h2 id="规范描述">规范描述</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p>
</div>
<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3>
<ul>
<li>基于Gecko的浏览器， 例如 Firefox， 实现了一个非标准的并且不赞成使用的属性 <code>ctx.mozTextStyle</code> 。不要使用此属性。</li>
<li>在Gecko中，当将系统字体设置为canvas 2D上下文的{{domxref("CanvasRenderingContext2D.font", "font")}}（例如菜单）的值时，获取用于无法返回期望字体的字体值 （不返回任何内容）。 这已在Firefox 57（{{bug(1374885)}}）中发布的Firefox的<a href="https://wiki.mozilla.org/Quantum/Stylo">Quantum/Stylo</a>并行CSS引擎中修复。</li>
</ul>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
