JavaScript查询本地字体

请求网页时有时需要下载自定义字体。自定义字体文件一般较大，虽然网上有很多延迟加载字体技术，可提高连接不佳的用户的性能。

如果我们能够知道用户有哪些字体，我们就可以避免加载一些自定义字体。

这就是queryLocalFontsJavaScript 函数的作用所在——用于收集用户字体信息。

queryLocalFonts是async一个在首次执行时需要用户通过浏览器提示获得权限的函数。 返回一个包含所有可用字体信息的对象queryLocalFonts数组：FontData

const localFonts = await window.queryLocalFonts();

// [FontData, FontData, ...]

/*
{
  family: "Academy Engraved LET",
  fullName: "Academy Engraved LET Plain:1.0",
  postscriptName: "AcademyEngravedLetPlain",
  style: "Plain",
}
*/

如果您想要针对特定的字体，您也可以直接查询属性postscriptName：

const canelaFonts = await window.queryLocalFonts({
  postscriptNames: ["Canela", "Canela-Bold"],
});

// [FontData, FontData, ...]

queryLocalFonts就可以使用用户已有的字体，就不必下载自定义字体。

需要注意: 权限提示似乎会阻止用户允许该 API ！！！

关注小编的微信公众号 [前端小糖的健康生活]，获取最新国内外前端资讯、面试技巧及实用办公工具，助你职场升级，每日进步！