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部署时-仅托管存在问题。确保文件名在字体CSS中正确无误。

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

Firebase托管的字体总是回来404

2 个答案: