如何获取Google Fonts的fonts.gstatic.com静态URL用于FontFace API？

• 打开Google Fonts官网，找到目标字体，进入字体详情页后点击右上角的「选择此字体」，页面底部会弹出字体选择面板。

• 打开浏览器开发者工具（按F12），切换到*「网络」标签页，筛选「字体」*类型。在字体选择面板里勾选所需的字重（如Regular、Bold）和样式（正常、斜体），此时浏览器会加载对应字体文件，你就能在网络请求列表中找到以fonts.gstatic.com开头的静态URL。

• 复制该URL，直接用于FontFace构造函数中，示例代码如下：

  let googleFont = new FontFace(
      "Lato", // 字体名称需与Google Fonts中的官方名称一致
      "url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2)"
  );
  
  // 加载字体并应用到Canvas
  googleFont.load().then(font => {
      document.fonts.add(font);
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      ctx.font = '24px Lato';
      ctx.fillText('使用Lato字体的文本', 10, 50);
  });
  

• 额外说明：

  • 不同字重、样式对应不同的fonts.gstatic.comURL，需分别提取对应版本的链接。
  • Google Fonts的字体文件路径可能随版本更新变更，若后续加载失败，重复上述步骤获取最新URL即可。
  • 优先选择woff2格式的字体文件，它的兼容性和压缩率都更优。

内容的提问来源于stack exchange，提问作者Adam