2

作業中のサイトの CSS ファイルの 1 つに埋め込まれている base64 でエンコードされたフォントについて、Chrome 開発ツールで次の警告が表示されます。

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は通常、スペースを表すトークンとして使用されるため)。++

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

Truetype フォントは content type を使用しますがapplication/x-font-ttf、これは問題ありません。

于 2012-11-03T09:35:07.937 に答える