FontFace

FontFace()

新しい FontFace オブジェクトを、 URL で記述されている外部リソースまたは ArrayBuffer から構築して返します。

FontFace.ascentOverride

フォントのアセンダーの寸法を取得または設定する文字列です。これは ascent-override 記述子と等価です。

FontFace.descentOverride

フォントのディセンダーの寸法を取得または設定する文字列です。これは descent-override 記述子と等価です。

FontFace.display

フォントがダウンロードされ、使用する準備ができているかどうかによって、フォントフェイスがどのように表示されるかを決定する文字列。

FontFace.family

フォントのファミリを取得または設定する文字列です。これは font-family 記述子と等価です。

FontFace.featureSettings

フォントの variant プロパティでは利用できない、使用する頻度の低いフォント特性を取得または設定する文字列です。 CSS の font-feature-settings プロパティと等価です。

FontFace.lineGapOverride

フォントの行ギャップの寸法を取得または設定するには文字列を指定します。これは line-gap-override 記述子と等価です。

FontFace.loaded 読取専用

Promise を返します。これは、オブジェクトのコンストラクターで指定したフォントを読み込みに完了した場合に、現在の FontFace オブジェクトで解決したり、 SyntaxError DOMException で拒否されたりします。

FontFace.status 読取専用

フォントの状態を示す列挙値 "unloaded"、"loading"、"loaded"、"error" のいずれかを返します。

FontFace.stretch

文字列で、フォントがどのように伸縮するかを取得または設定します。これは font-stretch 記述子と同等です。

FontFace.style

文字列で、フォントのスタイルを取得または設定します。これは font-style 記述子と等価です。

FontFace.unicodeRange

文字列で、フォントを包含する Unicode コードポイントの範囲を取得または設定します。これは unicode-range 記述子と等価です。

FontFace.variant

文字列で、フォントのバリアントを取得または設定します。

FontFace.variationSettings Experimental

文字列で、フォントのバリエーション設定を取得または設定します。これは font-variation-settings 記述子と等価です。

FontFace.weight

文字列で、フォントの太さが入ります。これは font-weight 記述子と等価です。

FontFace.load()

現在のオブジェクトのコンストラクターに渡された要求（場所または元のオブジェクト内のバッファーも含む）に基づいてフォントを読み込み、現在の FontFace オブジェクトに解決する Promise を返します。

下記のコードでは、URL "myfont.woff" のデータといくつかのフォント記述子を使用してフォントフェイスを定義しています。 これがどのように動作するのかを示すために、プロパティを使用して stretch 記述子を定義しています。

// FontFace を定義
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

次に、 FontFace.load() を使ってフォントを読み込み、返すプロミスを使用して完了を追跡したり、エラーを報告したりします。

// フォントを読み込む
font.load().then(
  () => {
    // 解決 - document.fonts にフォントを追加
  },
  (err) => {
    console.error(err);
  },
);

実際にフォントを使用するには、 FontFaceSet に追加する必要があります。 これはフォントを読み込む前でも後でもできます。

それ以外の例は、 CSS フォント読み込み API > 例を参照してください。

• @font-face