Font-Awesome 字体 (woff) 未通过 Netlify CDN 加载

Question

我有一个 Netlify CDN 通过我的 GitHub 提取文件，看起来一切正常，除了加载字体。我是 CDN 的新手，但一直在研究和学习很多东西。

但是...我花了 4 个小时研究如何启用它，我在他们的文档或任何其他有类似问题的人中唯一能找到的就是我需要在根目录中创建一个 _header 文件目录，但它们没有指定与字体有关的任何内容。他们只是告诉我这个示例代码。

网站link： https://www.netlify.com/docs/headers-and-basic-auth/

示例Header：

## A path:
/templates/index.html
  # Headers for that path:
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
/templates/index2.html
  X-Frame-Options: SAMEORIGIN

有没有人有这方面的经验？我正要去寻找一个新的 CDN，但不确定还有谁是可靠的。

Answer 1

Netlify 允许您使用 netlify.toml 文件中的结构化配置在您的页面中设置 Headers。

要为 woff 内容类型添加 header，您需要 header 等价于：

/*.woff
    Access-Control-Allow-Origin: *
    Content-Type: application/font-woff

使用 Netlify Tool 测试有效的 headers，您在配置中的设置将是：

netlify.toml

[[headers]]
  for = "/*.woff"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Content-Type = "application/font-woff"

netlify.toml 文件存在于 Netlify 站点的根目录中。路径也需要有效，以上只是一个例子。

Answer 2

根目录下的文件_headers可以根据文档https://www.netlify.com/docs/headers-and-basic-auth/.

配置headers

以下示例演示了目录 /assets/fonts/ 及其子目录中的所有 ttf 和 woff 字体如何从任何来源获得访问权限。

# Custom Netlify Headers
# https://www.netlify.com/docs/headers-and-basic-auth/

/assets/fonts/*.woff
  Access-Control-Allow-Origin: *
  Content-Type: application/font-woff

/assets/fonts/*.ttf
  Access-Control-Allow-Origin: *
  Content-Type: application/font-ttf

Font-Awesome 字体 (woff) 未通过 Netlify CDN 加载

Font-Awesome fonts (woff) not loading via Netlify CDN

font-awesome

webfonts

netlify