从 Firebase 加载字体

Question

在我的网络应用程序中，我想使用 Futura Bold 字体。我购买了整个系列并将 Futura Bold.ttf 文件上传到 Firebase Storage。我用访问令牌复制了它的 link，并在样式标签中添加了以下内容：

@font-face {
            font-family: Futura;
            src: url(https://firebasestorage.googleapis.com/v0/b/my-project-name.appspot.com/o/Futura%20Bold%20font.ttf?alt=media&token=mytokenhere) format("truetype");
            font-weight: bold;
        }

但是它不会更改默认字体，并且在控制台中出现以下错误：

我该如何解决这个问题？在 Firebase 存储中存储字体是一种糟糕的方式吗？

Answer 1

通常情况下，最好使用传统的托管解决方案来托管字体文件（例如，您用来托管网站的 HTML），因为它们专为此类用例而设计，并且会执行缓存等操作使字体加载更有效（这是可能的，但在 firebase 存储上更难）。

也就是说，如果您想在 firebase 上托管它，您可以：

Firebase 存储默认启用 CORS 限制，这意味着它会默认阻止其他网站（任何不是用户直接在地址栏中输入 URL 的网站）加载文件。

对于您的用例，您可能希望 configure your firebase storage bucket to accept all requests 通过创建包含以下内容的临时 cors.json 文件：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

然后，按照these instructions和运行安装gsutil：

gsutil cors set cors.json gs://your-storage-bucket.appspot.com

确保将 your-storage-bucket.appspot.com 替换为您自己的存储桶，您可以在您的 firebase 配置对象中找到它。

从 Firebase 加载字体

Loading a font from Firebase

html

css

fonts

firebase

firebase-storage