DOM

：

FontFaceインターフェイス

：

load メソッド

　 編集：2022.02.10 by T.A.

現在のオブジェクトのコンストラクターで渡された要件に基づいてフォントをロードします。→MS（en）

ロケーションまたはソース･バッファを含み、現在の FontFace オブジェクトで解決される Promise を返します。

FontFace.load()
FontFace FontFace。
戻り値

フォントがロードされるときに現在の FontFace オブジェクトへの参照で解決されるか、ロードプロセスが失敗した場合にNetworkErrorDOMExceptionで拒否されるかの Promise。

例外
NetworkError DOMException
フォントの読み込みに失敗したことを示します。
例
この例では、フォントをロードし、それを使用して、canvas要素（js-canvasのID）にテキストを表示します。 
const mycanvas = document.getElementById("js-canvas");

// load the "Bitter" font from google fonts
let font_file = new FontFace('FontFamily Style Bitter', 'url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)');

font_file.load().then( () => {
  // font loaded successfully!
  mycanvas.width = 650;
  mycanvas.height = 100;
  var ctx = mycanvas.getContext('2d')

  ctx.font = '36px "FontFamily Style Bitter"'
  ctx.fillText('Bitter font loaded', 20, 50)
  },
(err) => {
  console.error(err)
});
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：