1、核心API: queryLocalFonts;以下为主要注意事项:
-
注意浏览器最低版本
-
需用户授权
-
网站是否安全,若不安全默认禁止获取本地字体列表
# 代码演示
export async function getLocalFonst() {if ("queryLocalFonts" in window) {try {const availableFonts = await (window as any).queryLocalFonts();if (!availableFonts.length) {return [];}return availableFonts;} catch (err) {return Promise.reject(err);}} else {return Promise.reject("浏览器版本太低 or 网站不安全");}
}
# 代码讲解
- if ("queryLocalFonts" in window)
- 用来判断用户浏览器版本是否可调用queryLocalFonts方法。
- 但是!如果该网站不安全,那么谷歌浏览器强制禁止获取系统字体,queryLocalFonts方法一定为undefined
-
const availableFonts = await (window as any).queryLocalFonts();
-
该方法是异步的,使用时需注意;
-
返回值为用户的字体列表数据,对象数组,对象类型为 FontData 类型;
-
但是!如果用户拒绝了你的字体获取申请,那么该返回值为[],一般系统字体列表为[]基本不可能,所以此时肯定就是用户拒绝了,一旦拒绝了,代码再次调用也没用,需要用户手动去浏览器设置里打开该网站的字体权限;
-
-
try catch 说实话应该没啥用,以防万一 才加上去的。。MDN上写有两种错误类型,但没法验证。大佬们有方法验证的请赐教~~
就以上内容了,over~~