Chrome 103支持使用本地字体，纯前端导出PDF优化

Chrome 103

提高页面性能的一种方法是对当前的使用资源经行提示。例如，预加载文件或连接到不同的服务器。

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="https://web-dev.imgix.net"
      rel="preconnect">

但是在服务器发送页面内容之前，浏览器是无法对提示采取行动。

服务器需要几百毫秒才能生成一个请求页面，在浏览器开始接收页面内容之前，服务器是不进行任何处理的。但是在这个等待的过程中，服务器是需要一些固定子资源，例如 CSS 文件、JavaScript 和图像内容，这个时候服务器可以立即响应新的 HTTP 103 Early Hints 状态代码，并询问浏览器预加载那些子资源，以提供高座效率。

一旦服务器生成了页面，它就可以用正常的 HTTP 200 响应发送它。当页面进入时，浏览器已经开始加载所需的资源。作为一个新 HTTP 状态代码，所以它需要更新我们服务器。

本地字体访问

Web 上的字体一直是一个挑战，尤其是允许用户创建自己的图形和设计的应用程序就是一个难点。现在应用程序只能使用网络字体，但无法获得用户在其计算机上安装的字体列表；而且，无法访问完整的字体表数据，如果我们需要实现自己的自定义文本堆栈，就很复杂。

而在新版本中，这个问题得到了很好解决。Chrome 103版本中新的字体API可以让web应用获取到用户在本地电脑上安装的所有字体信息，同时还可以获取到字体内容。

调用window.queryLocalFonts()，会返回用户安装字体的数组。

const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

处于安全性的考虑，获取字体信息需要获取到用户的授权。当第一调用queryLocalFonts时，Chrome会弹出权限申请：

权限同意后，就可以获取所有安装字体的信息

使用navigator.permissions.query可以检查权限

async function requestPremission(){
  const { state } = await navigator.permissions.query({
    name: "local-fonts"
  });
  console.log(state)
  if (state === 'granted') {
    query();
  } else if (state === 'prompt') {
    alert("请授予权限！")
    query();
  }
  else{
    alert("没有权限获取字体")
  }
}

使用本地字体导出PDF

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。