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

时间:2018-01-07 18:52:07

标签: font-awesome webfonts netlify

我有一个Netlify CDN通过我的GitHub提取文件,除了加载字体外,一切看起来都很好。我对CDN很新,但一直在研究和学习很多东西。

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

网站链接: https://www.netlify.com/docs/headers-and-basic-auth/

示例标题:

## 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,但不确定还有谁可靠。

2 个答案:

答案 0 :(得分:5)

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

要为woff内容类型添加标头,您需要一个等效于:

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

使用Netlify Tool测试有效标头,配置中的设置为:

netlify.toml

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

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

答案 1 :(得分:0)

根据文档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