本地字体访问 API
本地字体访问 API 提供了一种访问用户本地安装的字体数据的机制,这包括名称、样式和字体系列等更高级别的详细信息,以及底层字体文件的原始字节。
概念与用法
Web 字体通过允许网页设计师为网页文档提供自定义字体,在网络排版方面具有革命性意义。通过 @font-face
规则指定,Web 字体可以从 url()
函数中提供的 URL 加载。
@font-face
还有其他一些有用的功能。特别是,您还可以将字体或 Postscript 名称完全指定在 local()
函数中,以告知浏览器如果用户在其计算机上安装了该字体,则使用本地副本。这并非没有问题,local()
已成为一种臭名昭著的 指纹识别矢量。
此外,高端设计工具由于在准确枚举字体和访问低级字体数据(例如,应用滤镜和变换)方面存在挑战,因此在 Web 上一直难以实现。当前应用程序通常依赖于变通方法,例如要求用户将字体上传到服务器进行处理以获取原始字节数据,或者安装单独的本地程序以提供附加功能。
本地字体访问 API 的创建旨在解决这些问题。
Window.queryLocalFonts()
方法提供对本地安装字体数组的访问,每个字体都由一个 FontData
对象实例表示。 FontData
具有几个提供名称、样式和字体系列访问权限的属性,它还具有一个 blob()
方法,该方法提供对包含底层字体文件原始字节的 Blob
的访问。
在隐私和安全方面
- 本地字体访问 API 的设计仅限于提供解决上述问题所需的数据访问。浏览器也没有义务提供可用本地字体的完整列表,也没有义务以与磁盘上相同的顺序提供数据。
- 当调用
Window.queryLocalFonts()
时,会要求用户授权访问其本地字体。此权限的状态可以通过 Permissions API(local-fonts
权限)进行查询。 - 您可以使用
local-fonts
Permissions Policy 来控制对该功能的访问。
接口
FontData
-
表示单个本地字体。
其他接口的扩展
示例
有关工作演示,请参阅我们的 本地字体访问 API 演示。
特性检测
if ("queryLocalFonts" in window) {
// The Local Font Access API is supported
}
字体枚举
以下代码段将查询所有可用的字体,并记录元数据。例如,这可以用于填充字体选择控件。
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);
}
}
访问低级数据
blob()
方法提供对低级 SFNT 数据的访问——这是一种字体文件格式,可以包含其他字体格式,例如 PostScript、TrueType、OpenType 或 Web Open Font Format (WOFF)。
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 |
浏览器兼容性
加载中…