html - 在 Google 应用程序中使用导入的字体

Question

我正在使用 Google Apps 脚本创建网络应用程序。当我想从 Google 文档导入照片时，我遵循了 this question 的建议。它工作得很好。我认为类似的过程适用于使用 Docs 上托管的自定义字体，但它会引发 CORS 异常。

相关代码:

@font-face {
    font-family: MyCustomFont;
    src: url("https://drive.google.com/uc?export=download&id=1r2a5nd6om75url39428dfju4");
} 

#headBanner {
    font-family: MyCustomFont;
}

<div id="headBanner"> 
  <p>This text should be in MyCustomFont</p>
</div>

它抛出的错误是:“从来源‘[我正在使用的 Google Script 页面]’访问‘[字体中的 URL]’处的字体已被 CORS 策略阻止:无‘Access-Control-Allow-Origin '请求的资源上存在 header 。因此不允许访问来源'[Google Script page I'm using]'。”

我该如何解决这个问题？我只是觉得很困惑，它会为字体文件而不是图片抛出 CORS 异常。

Answer 1

字体文件以及使用 fetch 的 AJAX 请求是唯一使用 CORS 的东西。 JavaScript(通过标签)和 CSS 的图像请求和静态内联请求不会调用 CORS。

在这种情况下，除了(如@andrei-gheorghiu 所建议的那样)手动下载字体文件，将其保存到您的服务器，然后从那里访问它，您无能为力。虽然您可以技术上做到这一点，但技术上这将是窃取。因此他使用了“可以，而不是可能”...

有趣的事实 - CORS 基本上是为您遇到的特定用例而发明的 - 这样“字体工厂”就可以设计字体(显然这会花钱)，然后能够允许/拒绝访问这些字体文件，具体取决于您是否支付了许可费。

毫无疑问，这不是您想要的答案，但仍然是答案。