Firefoxで@ font-faceでデータのURIを使用する方法

Question

公開Wi-Fiアクセスポイント用のスプラッシュページを設計しています。Firefoxは他のすべてのブラウザで動作しますが、私のカスタムフォントを表示することを拒否します（< 9しかしそれは期待されていた）。

が

• インターネットへのアクセスなし：このページには、用語と条件を受け入れ、ユーザーの前に表示されているので、すべてが
• をブロックされているページが保存されている

  ページには、次の制約で作業する必要がありますアクセスポイントでは、おそらくCで書かれた組み込みサーバーを意味し、実際にはヘッダなどを追加することはできません。まあオープンソースなので可能かもしれませんが、私は組み込み開発者ではありません！

• WiFiは、それが提供されている小さな町を宣伝するために使用されるので、できるだけ可愛いはずです。

  @font-face { 
      font-family: Lato-Light; 
      src: url(data:application/font-woff;base64,<large base64 string>) 
       format('woff'); 
  } 
  
  h1{ 
      font-family: Lato-Light, Helvetica, sans-serif; 
  } 
  

  は、それは、Firefoxを除き...魔法のように動作します：

は、私はそうのように、データのURIとする@ font-faceを使用するものの制約を満たすために。今は古いIEではうまくいかないことを理解していますが、私はその準備をする準備ができています。しかし、私にとっては、いわゆる現代的なブラウザがその機能を提供しないということは奇妙に思えます。なぜこれは機能しないのですか？

編集：もちろん、私はフォールバックのアイデアがたくさんありますが、私の質問はこれ以上です：なぜFirefoxは他のブラウザと同じではないこの動作をしていますか？それはセキュリティ設定ですか？ data-uri実装のバグ？ data-uriのサイズ制限？

Answer 1

最後に、問題は、私が誤ったフォントを生成したwoffフォントジェネレータを使用していることでした。 SafariとIEはそれを読み取ることができましたが、FirefoxとChromeの最新バージョンではエラーが含まれていたため、Firefoxを拒否しました。最近のwoffフォントジェネレータを使用することで、すべてのブラウザで動作させることができました。詳細については

正しいWOFFフォントジェネレータ

http://people.mozilla.org/~jkew/woff/

、バグが報告することを確認します

https://bugzilla.mozilla.org/show_bug.cgi?id=735556

を私は答えを提供するためのMozillaのジョナサン・キューに感謝したいと思います。

Answer 2

HTTPリクエストを減らすために、私はサブセットとBase64をCSS（Font Squirrel @ Font-Face Generator、詳細設定、およびicomoon.ioを使用したアイコンフォント用）にいくつかのWebフォントを埋め込みました。

私は本当に賢いと思っていましたが、私は静的なサブドメインからサービスを受けました... Firefoxではいいですね。

明らかにFirefoxに固有の制限的なクロスドメインリソース設定でした。 HTML5 Boilerplateの「標準」.htaccessファイルをアップロードしたときには、それが許可されていて問題を解決しました。

将来の読者に役立つことを願っています。私の言葉が正確でない場合は申し訳ありませんが、私はまだかなり新しいです（H5BP .htaccessコメントとドキュメントでよく説明されています）。