本地字体访问 API
本地字体访问 API 提供了一种访问用户本地安装的字体数据的机制——这包括更高级别的详细信息,例如名称、样式和族,以及底层字体文件的原始字节。
概念和用法
Web 字体 通过允许 Web 设计师提供在 Web 文档中使用的自定义字体,彻底改变了 Web 上的排版。通过 @font-face
规则指定,Web 字体可以从 url()
函数中提供的 URL 加载。
@font-face
提供了其他一些有用的功能。特别是,您还可以将字体的完整名称或 Postscript 名称指定在 local()
函数中,以告诉浏览器如果用户在他们的计算机上安装了该字体,则使用本地副本。但这并非没有问题——local()
已臭名昭著地成为 指纹识别向量。
此外,由于在准确的字体枚举和访问低级字体数据(例如,应用滤镜和转换)方面存在挑战,高端设计工具历来难以在 Web 上交付。当前的应用程序通常依赖于一些变通方法,例如要求用户将字体上传到服务器以进行处理以获取原始字节数据,或安装单独的本地程序以提供其他功能。
本地字体访问 API 的创建就是为了解决这些问题。
Window.queryLocalFonts()
方法提供了对本地安装字体的数组的访问,每个字体都由 FontData
对象实例表示。FontData
有几个属性可以访问名称、样式和族,它还有一个 blob()
方法,可以访问包含底层字体文件原始字节的 Blob
。
在隐私和安全方面
- 本地字体访问 API 旨在仅提供解决上述问题所需的数据。浏览器也没有要求提供可用本地字体的完整列表,也没有要求按与磁盘上显示相同的顺序提供数据。
- 当调用
Window.queryLocalFonts()
时,会提示用户是否允许访问其本地字体。可以通过 权限 API(local-fonts
权限)查询此权限的状态。 - 您可以使用
local-fonts
权限策略 控制对此功能的访问。
接口
FontData
-
表示单个本地字体面。
对其他接口的扩展
Window.queryLocalFonts()
-
返回一个
Promise
,该 Promise 以一个FontData
对象数组的形式完成,这些对象表示本地可用的字体面。
示例
有关正在运行的实时演示,请参阅 字体选择演示。
功能检测
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://docs.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);
}
}
规范
规范 |
---|
本地字体访问 |
浏览器兼容性
BCD 表仅在浏览器中加载