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
|
---
title: CanvasRenderingContext2D.font
slug: Web/API/CanvasRenderingContext2D/font
tags:
- API
- Canvas
- CanvasRenderingContext2D
- Propriété
- Reference
translation_of: Web/API/CanvasRenderingContext2D/font
---
<div>{{APIRef}}</div>
<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font" title="fr/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var>
</pre>
<h3 id="Options">Options</h3>
<dl>
<dt><code>valeur</code></dt>
<dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3>
<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</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 = '48px serif';
ctx.strokeText('Hello world', 50, 100);
</pre>
<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<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="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);</textarea>
</pre>
<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>
<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3>
<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p>
<pre class="brush: js">var f = new FontFace('test', 'url(x)');
f.load().then(function() {
// Prêt à utiliser la police dans un contexte de canevas
});</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
<ul>
<li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li>
</ul>
<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
<ul>
<li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li>
</ul>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
