ストーリータイム
書体が表示されるたびにドメインの一意のカウンターを照会するように求められるライセンスの書体を購入またはレンタルしています。悲しいことに、彼らの提案は、CSS ファイルで を使用して呼び出すことimportです。これにより、呼び出し中はレンダリングがブロックされます。ライセンスによれば、個々のページビューを追跡したいのですが、問題のCSSファイルがキャッシュされている場合、キャッシュがクリアされるまでインポートが再度呼び出されるのを妨げないのでしょうか?
いずれにせよ、私はimport呼び出しを削除しましたが、それを正確に何に置き換えるかを考え始めました. 無効な機能に関係なく、ブラウザ間で普遍的に機能するノンブロッキング コールを提供するタグはどれですか? とのリンクrel=prefetch？HTML5、IE7 でテストしたところ動作しませんでした。No-Cacheまた、リソースをキャッシュする必要があるにもかかわらず、応答にディレクティブが含まれていることを意味するため、扱いにくいと感じるでしょう。deferページの最後にとasync属性を持つスクリプト タグはありますか? そうかもしれませんが、誰かがスクリプトを無効にした場合はどうでしょうか。追加できますnoscriptタグを付けてから、フォールバックとしてその中にイメージ タグを付けます。しかし！画像の内容が空の文字列であるため、一部のブラウザーでは画像が壊れて表示されますか? 誰かがスクリプトと画像を無効にしている場合はどうなりますか? 大野！彼らにとって世界はかなり暗い場所に違いない、と認めざるを得ない。ああ、ああ！どうembed/objectですか？今、それはちょうど間違っています、私に面白いことに触れるのをやめてください。
今のところ単純なイメージ タグだけを使用することになりましたが、最も幅広いエッジ ケースをカバーする魔法の組み合わせは何でしょうか? scriptたとえば、タグを追加して、画像をロードしないものをサポートできます。
ここでの私の興味は純粋に科学的なものなので、代替の書体プロバイダーを実際に探したり、以前に説明された状況がいかにありそうもないかについて議論したりするつもりはありません。また、なぜ彼らが私自身のサーバーから提供する実際のフォント ファイルを私に提供し、カウンターを正直に呼び出すと信じているのか、私には理解できません。
コード
私の独自のフォント カウンターがhttp://font.foo/barにあり、font.foo サーバーの動作が遅いとします。
出発点
// fonts.css
@import url('font.foo/bar')
@font-face { ... }
// index.html
<link rel="stylesheet" href="fonts.css">
別のリンクタグ
// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">
rel=プリフェッチ
// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">
延期された非同期スクリプトの読み込み
// Problem: Won't work when user has disabled scripting
// index.html
<script src="font.foo/bar" async defer>
</body>
画像フォールバックが追加されたスクリプトタグ
// Problem: Won't work when user has disabled scripting AND images
// index.html
<script src="font.foo/bar" async defer>
<noscript><img src="font.foo/bar" alt=""></noscript>
</body>