Window: queryLocalFonts() 方法
window.queryLocalFonts() 方法返回一個 Promise，該 Promise 在成功時會帶有一個 FontData 物件陣列，表示本地可用的字型。
要使用此方法，使用者必須授予訪問 local-fonts 的許可權（許可權狀態可以透過 Permissions API 查詢）。此外，此功能可能會被伺服器上設定的 Permissions Policy 阻止。
語法
js
queryLocalFonts(options)
引數
options可選-
包含可選的配置引數。目前只定義了一個屬性：
postscriptNames可選-
一個字型 PostScript 名稱陣列。如果指定此引數，則結果中只包含與陣列中 PostScript 名稱匹配的字型；如果未指定，則結果中包含所有字型。
返回值
異常
NotAllowedErrorDOMException-
當方法首次呼叫後，瀏覽器顯示許可權提示時，使用者選擇拒絕使用此功能。
SecurityErrorDOMException-
此功能的使用被 Permissions Policy 阻止，或者它不是透過使用者互動（例如按鈕按下）呼叫的，或者當前的 源 是不透明的源。
示例
有關正在執行的即時演示，請參閱我們的 本地字型訪問 API 演示。
字型列舉
以下程式碼片段將查詢所有可用字型並記錄元資料。例如，這可用於填充字型選擇器控制元件。
js
async function logFontData() {
try {
const availableFonts = await window.queryLocalFonts();
for (const fontData of availableFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
} catch (err) {
console.error(err.name, err.message);
}
}
限制返回結果
要將返回的字型資料限制為僅特定字型列表，請使用 postscriptNames 選項。
js
async function returnSpecificFonts() {
const availableFonts = await window.queryLocalFonts({
postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
});
return availableFonts;
}
訪問低階資料
blob() 方法提供對低階 SFNT 資料的訪問——這是一種字型檔案格式，可以包含其他字型格式，例如 PostScript、TrueType、OpenType 或 Web Open Font Format (WOFF)。
js
async function computeOutlineFormat() {
try {
const availableFonts = await window.queryLocalFonts({
postscriptNames: ["ComicSansMS"],
});
for (const fontData of availableFonts) {
// `blob()` returns a Blob containing valid and complete
// SFNT-wrapped font data.
const sfnt = await fontData.blob();
// Slice out only the bytes we need: the first 4 bytes are the SFNT
// version info.
// Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
const sfntVersion = await sfnt.slice(0, 4).text();
let outlineFormat = "UNKNOWN";
switch (sfntVersion) {
case "\x00\x01\x00\x00":
case "true":
case "typ1":
outlineFormat = "truetype";
break;
case "OTTO":
outlineFormat = "cff";
break;
}
console.log("Outline format:", outlineFormat);
}
} catch (err) {
console.error(err.name, err.message);
}
}
規範
| 規範 |
|---|
| 本地字型訪問 API # dom-window-querylocalfonts |
瀏覽器相容性
載入中…