2

我在 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. 字体的正确 mime 类型
  2. 哈！在你的字体中

为了消除此警告，我可以在 Rails (3.2.8) 或 CSS 中进行哪些更改？

4

1 回答 1

0

链接的 SO 问题说没有font/主要的内容类型轴（可能应该有，但没有）并且 SVG 字体的内容类型是image/svg+xml; 剩下的就是在data:URL 中正确编码。这有点棘手，因为+解码后您需要 a 在其中，因此您必须对其进行编码（因为 a+通常用作代表空格的标记）：

数据：图像/svg%2Bxml;charset=utf-8;base64,PD94bWwgd...

Truetype 字体使用 content type application/x-font-ttf，这是没有问题的。

于 2012-11-03T09:35:07.937 回答