From cfb426b72ba1214cf4cbfdaa5604306578834166 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 15 May 2021 11:44:28 +0900 Subject: Web/API/CanvasRenderingContext2D/font を更新 (#714) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/02/20 時点の英語版に同期 - 原語併記マクロを廃止 --- .../api/canvasrenderingcontext2d/font/index.html | 122 ++++++++------------- 1 file changed, 43 insertions(+), 79 deletions(-) diff --git a/files/ja/web/api/canvasrenderingcontext2d/font/index.html b/files/ja/web/api/canvasrenderingcontext2d/font/index.html index 5a2fef3180..d2812c474d 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/font/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/font/index.html @@ -2,116 +2,78 @@ title: CanvasRenderingContext2D.font slug: Web/API/CanvasRenderingContext2D/font tags: - - API - - Canvas - - CanvasRenderingContext2D - - Property - - Reference +- API +- Canvas +- CanvasRenderingContext2D +- Property +- Reference translation_of: Web/API/CanvasRenderingContext2D/font ---
{{APIRef}}
-

Canvas 2D API の CanvasRenderingContext2D.font プロパティは、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS font {{ 原語併記("記述子", "specifier") }} と同じ構文を用います。デフォルトフォントは 10px の{{ 原語併記("サンセリフ", "sans-serif") }} です。

+

CanvasRenderingContext2D.font は Canvas 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS font の記述子と同じ構文を用います。

-

構文

+

構文

-
ctx.font = value;
+
ctx.font = value;
 

 
-
オプション

+
オプション

 
 

  
value

- 
CSS {{cssxref("font")}} の値としてパースされる {{domxref("DOMString")}}。デフォルトのフォントは 10px sans-serif です。

+ 
{{domxref("DOMString")}} で、 CSS の {{cssxref("font")}} の値として解釈されるものです。既定のフォントは 10px sans-serif です。

 

 
-
例

+
例

 
-
font プロパティの使用例

+
カスタムフォントの使用

 
-
さまざまなフォントサイズやフォントファミリーを設定するために font プロパティを使用する、シンプルなコードスニペットです。

+
この例では、 font プロパティを使用して、カスタムフォントの太さ、大きさ、ファミリーを指定します。

 
-
HTML

+
HTML

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

 
-
JavaScript

+
JavaScript

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

 
-
以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+
結果

 
-
-
-
{{EmbedLiveSample('Playable_code', 700, 360)}}

-
-
CSS Font Loading API でフォントを読み込む

+
CSS Font Loading API でフォントを読み込む

 
 
{{domxref("FontFace")}} API の助力により、canvas で使用する前にフォントを明示的に読み込むことができます。

 
-
var f = new FontFace("test", "url(x)");
-  f.load().then(function() {
-    // canvas コンテキストでフォントを使用する準備ができた
+
let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // canvas コンテキストでフォントを使用する準備ができた
 });

 
-
仕様

+
仕様書

 
 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+  
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
仕様書状態備考
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}}

 

 
 
ブラウザ実装状況

@@ -121,10 +83,12 @@ window.addEventListener("load", drawCanvas);
 
Gecko 固有の注意事項

 
 
    
- 
  • Firefox など Gecko ベースのブラウザではこのプロパティのほかに、非標準かつ非推奨の ctx.mozTextStyle を実装しています。これは使用しないでください。
    • 
+  
  • Firefox など Gecko ベースのブラウザーでは、このプロパティのほかに標準外かつ非推奨の ctx.mozTextStyle を定義しています。代わりに ctx.font を使用してください。
    • 
+  
  • Gecko では、システムフォントをキャンバスの 2D コンテキストの {{domxref("CanvasRenderingContext2D.font", "font")}} (例えば menu) の値として設定した場合、フォントの値を取得しても期待したフォントが返されない (何も返されない) ことがありました。これは、Firefox 57 でリリースされた Firefox の並列 CSS エンジン Quantum/Stylo で修正されました (bug 1374885)。
    • 
+
 

 
-
関連情報

+
関連情報

 
 
    
  
  • このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}
    • 
-- 
cgit v1.2.3-54-g00ecf