【JS】web浏览器访问本地系统字体列表

 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 网站不安全");
    }
}

---

# 代码讲解

1. if ("queryLocalFonts" in window) 
   1. 用来判断用户浏览器版本是否可调用queryLocalFonts方法。
   2. 但是！如果该网站不安全，那么谷歌浏览器强制禁止获取系统字体，queryLocalFonts方法一定为undefined

2. const availableFonts = await (window as any).queryLocalFonts(); 

   1. 该方法是异步的，使用时需注意；

   2. 返回值为用户的字体列表数据，对象数组，对象类型为 FontData 类型；

   3. 但是！如果用户拒绝了你的字体获取申请，那么该返回值为[]，一般系统字体列表为[]基本不可能，所以此时肯定就是用户拒绝了，一旦拒绝了，代码再次调用也没用，需要用户手动去浏览器设置里打开该网站的字体权限；

3. try catch 说实话应该没啥用，以防万一 才加上去的。。MDN上写有两种错误类型，但没法验证。大佬们有方法验证的请赐教~~

---

就以上内容了，over~~