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

Question

我正在使用 Google Apps 脚本创建网络应用程序。当我想从 Google Docs 导入照片时，我遵循了的建议并且效果很好。我认为类似的过程适用于使用 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>

它抛出的错误是："Access to Font at '[URL in font]' from origin '[Google Script page I'm using]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[Google Script page I'm using]' is therefore not allowed access."

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

Answer 1

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

在这种情况下，除了（如@andrei-gheorghiu 建议的那样）手动下载字体文件，将其保存到您的服务器，然后从那里访问它，您无能为力。虽然你可以技术上这样做，但技术上会窃取[=24] =].因此他使用 "Can, not may"...

有趣的事实 - CORS 基本上是为您遇到的特定 use-case 而发明的 - 因此 'font factories' 可以设计字体（这让他们付出了代价钱，显然）然后能够 allow/deny 访问这些字体文件，具体取决于您是否支付了许可费。

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

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

Using Imported Fonts in a Google App

html

css

font-face

cors