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 |
浏览器兼容性
加载中…