Chrome警告：资源被解释为字体，但使用MIME类型字体/ svg进行传输

Question

我在Chrome开发工具中收到有关base64编码字体的以下警告，该字体嵌入在我正在处理的网站中的一个CSS文件中。

Resource interpreted as Font but transferred with MIME type font/svg: "data:font/svg;charset=utf-8;base64,PD94bWwgd -- big base64 encoded string -- 2RlZnM+PC9zdmc+"

在CSS中，字体插入如下：

@font-face {
  font-family: 'PrintBelt';
  src: url('data:font/svg;charset=utf-8;base64,PD94bWwgd -- big base64 encoded string -- 2RlZnM+PC9zdmc+") format('svg'), url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAA -- other big base64 encoded string -- AAAAzLVVtw==') format('truetype');
}

我搜索了一下，发现了一些博客文章和SO问题，旨在解释如何解决这个问题。但它们似乎都没有处理嵌入在CSS中的字体。

1. Proper mime type for fonts
2. Ha! In your font-face

我可以在Rails（3.2.8）或CSS中更改哪些内容以消除此警告？

Answer 1

链接的SO问题表示没有font/主要内容类型轴（可能应该有，但没有），并且SVG字体的内容类型是image/svg+xml;剩下的就是在data: URL中正确编码。这非常轻微棘手，因为你在解码后需要+，所以你必须对它进行编码（因为+通常用作代表来代表a空间）：

data:image/svg%2Bxml;charset=utf-8;base64,PD94bWwgd...

Truetype字体使用内容类型application/x-font-ttf，这是没有问题的。