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 中正确编码。这非常有点棘手，因为解码后你需要一个+，所以你必须对其进行编码（因为+通常用作代表空格的标记）：

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

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