From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../api/canvasrenderingcontext2d/font/index.html | 136 --------------------- .../web/api/canvasrenderingcontext2d/font/index.md | 136 +++++++++++++++++++++ 2 files changed, 136 insertions(+), 136 deletions(-) delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d/font') diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html deleted file mode 100644 index 34b90f9580..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: CanvasRenderingContext2D.font -slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/font ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.font de l'API 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 police CSS. La police par défaut est 10px sans-serif.

- -

Syntaxe

- -
ctx.font = value;
-
- -

Options

- -
-
valeur
-
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
-
- -

Exemples

- -

Utilisation de la propriété font

- -

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.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Chargement de polices avec l'API CSS Font Loading

- -

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

- -
var f = new FontFace('test', 'url(x)');
-
-f.load().then(function() {
-  // Prêt à utiliser la police dans un contexte de canevas
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.font")}}

- -

Notes spécifiques à Gecko

- - - -

Notes relatives à Quantum

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md new file mode 100644 index 0000000000..34b90f9580 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -0,0 +1,136 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.font de l'API 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 police CSS. La police par défaut est 10px sans-serif.

+ +

Syntaxe

+ +
ctx.font = value;
+
+ +

Options

+ +
+
valeur
+
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
+
+ +

Exemples

+ +

Utilisation de la propriété font

+ +

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.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Chargement de polices avec l'API CSS Font Loading

+ +

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

+ +
var f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Prêt à utiliser la police dans un contexte de canevas
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Notes spécifiques à Gecko

+ + + +

Notes relatives à Quantum

+ + + +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf