Firebase 托管的字体总是返回 404

Question

我在静态 firebase (angular) 应用程序中有一些字体文件。我使用的似乎是有效的应用程序结构：

./firebase.json 

./dist/(all of my app)

我的字体位于 dist 文件夹中：

./dist/path/to/fonts/font.woff

... 在本地，该应用程序按预期工作，但在部署时，响应始终为 404。我认为它是：

1.) firebase 部署忽略了这些文件

2.) CORS 问题？

这是我的 firebase.json 文件的示例：

{
  "firebase": "my-firebase-app",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/node_modules/*"
  ],
  "headers": [ {
    "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  } ]
}

有人有什么想法吗？

Answer 1

我想通了。

不确定这是错误还是我遗漏了什么，但原始字体文件名为 Foo-webfont.woff。一时兴起（阅读：绝望），我决定将它们重命名为 foo.woff，瞧，我们有字体。

Answer 2

我发现字体文件的名称在我的 PC 上不区分大小写，MAC 但是当我部署 firebase 时 --only hosting 出现了问题。确保文件名在您的字体中正确 css.

   `@font-face {
       font-family: 'sfuitext-bold';
         src: url('#{$fontsPath}/SFUIText-Semibold.ttf') format("truetype");
       font-weight: normal;
       font-style: normal;
   }`

Firebase 托管的字体总是返回 404

Firebase-hosted fonts always come back 404

firebase

firebase-hosting