FontFace
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
FontFace は CSS フォント読み込み API のインターフェイスで、単一の使用可能なフォントフェイスを表します。
このインターフェイスは、フォントフェイスのソース（外部リソースへの URL またはバッファー）と、style や weight などのフォントプロパティを定義します。
URL フォントのソースの場合、リモートフォントが取得され読み込まれたときに発生させたり、読み込み状況を追跡したりすることができます。
コンストラクター
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オブジェクトで解決したり、SyntaxErrorDOMExceptionで拒否されたりします。 FontFace.status読取専用-
フォントの状態を示す列挙値
"unloaded"、"loading"、"loaded"、"error"のいずれかを返します。 FontFace.stretch-
文字列で、フォントがどのように伸縮するかを取得または設定します。これは
font-stretch記述子と同等です。 FontFace.style-
文字列で、フォントのスタイルを取得または設定します。これは
font-style記述子と等価です。 FontFace.unicodeRange-
文字列で、フォントを包含する Unicode コードポイントの範囲を取得または設定します。これは
unicode-range記述子と等価です。 FontFace.variant-
文字列で、フォントのバリアントを取得または設定します。
FontFace.variationSettingsExperimental-
文字列で、フォントのバリエーション設定を取得または設定します。これは
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 > 例を参照してください。
仕様書
| Specification |
|---|
| CSS Font Loading Module Level 3 # fontface-interface |
ブラウザーの互換性
Loading…