Local fonts
実験的: これは実験的な技術です
これを製品版で使用する前に、ブラウザーの互換性表を注意深く確認してください。
Local Font Access API の `FontData` インターフェイスは、単一のローカルフォントフェイスを表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
FontData 実験的 | 103 | 103 | | | | |
blob 実験的 FontData インターフェイスの blob() メソッドは、基になるフォント ファイルの生のバイトを含む Blob で満たされる Promise を返します。 | 103 | 103 | | | | |
family 実験的 FontData インターフェイスのファミリー読み取り専用プロパティは、フォント フェイスのファミリーを返します。 | 103 | 103 | | | | |
fullName 実験的 FontData インターフェイスの fullName 読み取り専用プロパティは、フォント フェイスの完全な名前を返します。 これは通常、フォントを識別するために使用される人間が判読できる名前です (例: 「Optima Bold」)。 | 103 | 103 | | | | |
postscriptName 実験的 FontData インターフェイスの postscriptName 読み取り専用プロパティは、フォント フェイスの PostScript 名を返します。 | 103 | 103 | | | | |
style 実験的 FontData インターフェイスの style 読み取り専用プロパティは、フォント フェイスのスタイルを返します。 | 103 | 103 | | | | |
permission_local-fonts 実験的 ローカルフォント`のパーミッション | 103 | 103 | | | | |
queryLocalFonts 実験的 window.queryLocalFonts() メソッドは、ローカルで利用可能なフォント フェイスを表す FontData オブジェクトの配列を満たす Promise を返します。 | 103 | 103 | | | | |
| その他 | ||||||
html.elements.iframe.allow.local-fonts 実験的 | 103 | 103 | | | | |
| HTTP の Permissions-Policy ヘッダーにおける local-fonts ディレクティブは、現在の文書が Window.queryLocalFonts() メソッドを介してユーザーのローカルにインストールされているフォントに関するデータを収集することを許可するかどうかを制御します。 | 103 | 103 | | | | |
基本構文
const fonts = await window.queryLocalFonts();
for (const font of fonts) {
console.log(font.family, font.fullName, font.style);
}実務での使いどころ
-
Local fonts の活用
実験的: これは実験的な技術です
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。