4

公共の Wi-Fi アクセス ポイント用のスプラッシュ ページを設計していますが、Firefox はカスタム フォントの表示を拒否しますが、他のすべてのブラウザー (IE < 9 ではありませんが、それは予想されていました) で動作します。

ページは次の制約で機能する必要があります。

  • インターネットへのアクセスなし : このページは、ユーザーが利用規約に同意する前に表示されるため、すべてがブロックされます
  • ページはアクセス ポイントに保存されます。これは、おそらく C で記述された組み込みサーバーを意味し、追加のヘッダーなどを実際に追加することはできません。オープンソースなので可能かもしれませんが、私は組み込み開発者ではないことは間違いありません!
  • WiFi は、それが提供されている小さな町を宣伝するために使用されるため、可能な限りきれいにする必要があります。

これらの制約を満たすために、次のように @font-face をデータ URI とともに使用しました。

@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を除いて。古い IE では動作しないことは理解していますが、それを使用する準備はできています。しかし、いわゆる最新のブラウザーがその機能を提供しないのは奇妙に思えます。なぜこれが機能しないのですか？

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

4

2 に答える 2

4

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

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

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

詳細については、バグ レポートを確認してください。

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

回答を提供してくれた Mozilla の Jonathan Kew に感謝します。

于 2012-03-16T03:50:14.570 に答える
-1

HTTP リクエストを削減するために、いくつかの Web フォントをサブセット化して Base64 で CSS に埋め込みました (Font Squirrel @font-face ジェネレーター、詳細設定、アイコン フォントには icomoon.io を使用しました)。

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

どうやら Firefox に固有の制限的なクロスドメイン リソース設定であることが判明しました。HTML5 Boilerplate 'standard' .htaccess ファイルをアップロードすると、明確に許可され、問題が解決されました。

それが将来の読者に役立つことを願っています、それはしばらく私を困惑させました...私の用語が正確さを欠いている場合は申し訳ありません、私はまだこれにかなり慣れていません(H5BP .htaccessコメントとドキュメントでよく説明されています)。

于 2012-09-02T07:20:12.263 に答える