本地字体访问 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-fontsPermissions 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 |
浏览器兼容性
加载中…