【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~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/7895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Deep Learning Part Eight Attention--24.5.3

注意力是全部。 --(你若安好,就是夏天)安夏的座右铭 00.引子 上一章我们使用 RNN 生成了文本,又通过连接两个 RNN,将一个时序数据转换为了另一个时序数据。我们将这个网络称为 seq2seq,并用它成功求解了简…

从哪些方面可以看出现货黄金价格走势?

现货黄金价格的走势受到多种因素的影响,我们可以从宏观经济环境、货币政策、供需关系、市场情绪和技术分析几个主要方面来观察和分析这一贵金属的价格动态。现货黄金作为全球投资市场中的避险资产,其价格波动往往能体现出复杂的经济和政治变化。 宏观经济…

前端开发中的组件是什么

在前端开发中,组件指的是一种可重用的、独立的模块,用于构建用户界面的一部分。 组件可以是按钮、输入框、导航栏、列表等各种UI元素,也可以是更复杂的功能模块,如轮播图、模态框、表单验证等。组件化是现代前端开发的重要概念&a…

一文读懂RPC的框架前后逻辑

目录 前言1. 没RPC2. 有RPC 前言 对于八股或者知识点,常会被说到RPC框架的知识点 本文主要讲解RPC的基本逻辑 那先讲讲没有RPC的时候是怎样的 1. 没RPC 分布式系统中的服务之间通常采用其他方式进行通信,其中一种常见的方式是使用RESTful API或者SO…

Java EE/Jakarta EE范畴一览

Java EE(Java Platform, Enterprise Edition)现在已经改名为Jakarta EE,是一套用于开发企业级应用的标准Java平台。它扩展了Java SE(Standard Edition),添加了支持大规模、多层次、可靠、安全、可伸缩和可管…

脸爱云一脸通智慧管理平台 SystemMng 管理用户信息泄露漏洞(XVE-2024-9382)

0x01 产品简介 脸爱云一脸通智慧管理平台是一套功能强大,运行稳定,操作简单方便,用户界面美观,轻松统计数据的一脸通系统。无需安装,只需在后台配置即可在浏览器登录。 功能包括:系统管理中心、人员信息管理中心、设备管理中心、消费管理子系统、订餐管理子系统、水控管…

树莓派的几种登录方式、及登录失败解决方式

使用TF卡安装树莓派的系统后,可以通过编辑TF卡里的文件来设置和启用 “ VNC ” 、“ SSH ” 和 “ 串口 ” 功能。不过,在使用中打开VNC和SSH可能并不直观或方便,因为这些服务通常在树莓派的系统内部配置和启动。但你可以通过以下步骤来设置和…

OpenCV 入门(三)—— 车牌筛选

OpenCV 入门系列: OpenCV 入门(一)—— OpenCV 基础 OpenCV 入门(二)—— 车牌定位 OpenCV 入门(三)—— 车牌筛选 OpenCV 入门(四)—— 车牌号识别 OpenCV 入门&#xf…

C++11 设计模式7 策略模式 ,Strategy

策略模式的概念: 策略模式(Strategy Pattern)是 C 中常用的一种行为设计模式,它能在运行时改变对象的行为。在策略模式中,一个类的行为或其算法可以在运行时更改。这种类型的设计模式属于行为模式。 在策略模式中&…

每日一题 礼物的最大价值

题目描述 礼物的最大价值_牛客题霸_牛客网 解题思路 这是一个典型的动态规划问题。我们可以使用一个二维数组 dp[][] 来存储到达每个格子时可以获得的最大价值。状态转移方程为 dp[i][j] max(dp[i-1][j], dp[i][j-1]) grid[i][j],表示到达当前格子的最大价值是从…

Windows PC上从零开始部署ChatGML-6B-int4量化模型

引言 ChatGLM-6B是清华大学知识工程和数据挖掘小组(Knowledge Engineering Group (KEG) & Data Mining at Tsinghua University)发布的一个开源的对话机器人。6B表示这是ChatGLM模型的60亿参数的小规模版本,约60亿参数。 ChatGML-6B-in…

面试 Java 基础八股文十问十答第三十一期

面试 Java 基础八股文十问十答第三十一期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)TreeMap 有了解过吗…

knife4j-openapi3 使用笔记

knife4j官方文档:https://doc.xiaominfo.com/docs/quick-start/start-knife4j-version 增强模式文档:https://doc.xiaominfo.com/docs/features/enhance 1.用法 (1)控制层 Tag(name “用户信息管理”) Tag(name "用户信…

代码随想录第四十六天|单词拆分

题目链接:. - 力扣(LeetCode)

STM32F4xx开发学习_SysTick

SysTick系统定时器 SysTick属于CM4内核外设,有关寄存器的定义和部分库函数都在core_cm4.h这个头文件中实现,可用于操作系统,提供必要的时钟节拍 SysTick简介 SysTick是一个 24 位向下定时器,属于CM4内核中的一个外设,…

无卤素产品是什么?有什么作用?

无卤素产品,即在生产过程中完全不使用卤素元素——氟、氯、溴、碘等——的产品。 卤素元素,虽然在电子设备、材料等领域应用广泛,却也可能潜藏危害。其阻燃剂,一旦在产品生命周期结束后释放,将对土壤和水体造成污染&a…

Python-100-Days: Day11 Files and Exception

1.读取csv文件 读取文本文件时,需要在使用open函数时指定好带路径的文件名(可以使用相对路径或绝对路径)并将文件模式设置为r(如果不指定,默认值也是r),然后通过encoding参数指定编码&#xf…

MyBatis入门例子

1、建立与数据库对应的POJO类 2、建立mybatis的配置文件 修改后如下: 3、创建POJO对象和Mysql数据的表之间的映射配置 4、建一个测试方法 实现从数据库中取数一条数据,封装成User对象返回 注意点: 这点,大家应该不陌生了&#x…

照片太大上传不了怎么缩小?教你几招压缩图片

在日常的工作和学习中,我们经常要用到一些图片文件,储存的图片多了之后,会对我们的电脑或者手机有影响,需要我们使用图片处理工具来压缩图片大小,那么有没有比较简单的图片压缩的方法呢?试试今天分享的几个…

【管理咨询宝藏94】某国际咨询公司供应链财务数字化转型方案

本报告首发于公号“管理咨询宝藏”,如需阅读完整版报告内容,请查阅公号“管理咨询宝藏”。 【管理咨询宝藏94】某国际咨询公司供应链&财务数字化转型方案 【格式】PDF版本 【关键词】国际咨询公司、制造型企业转型、数字化转型 【核心观点】 - 172…