在 Google 应用中使用导入的字体

Question

我正在使用 Google Apps 脚本创建一个网络应用程序。当我想从 Google Docs 导入照片时，我遵循了 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 脚本页面]'访问'[URL in font]' 的字体已被 CORS 策略阻止：没有'Access-Control-Allow-Origin ' 请求的资源上存在标头。因此，不允许访问 Origin '[Google Script page I'm using]'。"

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

Answer 1

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

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

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

无疑不是你想要的答案，但仍然是答案。