15

TypeFront でホストされているフォントを埋め込むために @font-face を使用していますが、私のフォントはブラウザー (Firefox 3.6.13 および Epiphany 2.30.2) によってキャッシュされません。これにより、ページが読み込まれるたびに、Firefox で FOUC (スタイル設定されていないコンテンツのフラッシュ) が発生し、Epiphany で MFOMT (欠落したテキストの瞬間的なフラッシュ、私はそれを作成したばかりです) が発生します (最初は FOUC/MFOMT で問題ありません)ページが読み込まれますが、毎回ではありません)。

可能であれば Base64 の CSS にフォントを埋め込む必要がないようにしていますが、フォントを自分でホストすることはできません。

フォントがキャッシュされないのはなぜですか? この問題が発生しない代替の無料フォント ホスティング サービスはありますか?

テスト ページ:

<!DOCTYPE html>
<html>
    <head>
        <title>TypeFront Cache Test</title>
        <style>
            @font-face {
                font-family: "Journal";
                src: url("http://typefront.com/fonts/825588825.ttf") format("truetype");
            }
            h1 {
                font-family: "Journal";
            }
        </style>
    </head>
    <body>
        <h1>Test text</h1>
    </body>
</html>

Firebug で観察すると、「304 Not Modified」またはキャッシュされたフォントが使用されていることを示すその他の表示ではなく、ページが読み込まれるたびに「200 OK」でフォントが提供されることが [Net] タブに表示されます (例: ブラウザは試行さえしていません) HTTP リクエスト)。

HTTP ヘッダー:

Response Headers

HTTP/1.1 200 OK
Server: nginx
Date: Sat, 26 Feb 2011 12:57:18 GMT
Content-Type: font/ttf
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Status: 200 OK
Content-Transfer-Encoding: binary
Access-Control-Allow-Origin: *
Content-Disposition: attachment; filename="typefront_735a460727.ttf"
Cache-Control: max-age=31536000
Expires: Sun, 26 Feb 2012 12:57:18 GMT
Content-Encoding: gzip

Request Headers

GET /fonts/825588825.ttf HTTP/1.1
Host: typefront.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: null
4

1 に答える 1

3

2016 年 11 月の更新: 以下で説明する Coral コンテンツ配信ネットワークは、もはや運用されていません。

これはかなり一般的な「ソリューション」です。何年も前から運営されているプロダクションサービスがあり、一般に公開されています（商用利用の条件を確認してください。適合するかどうかはわかりません）。これは、コンテンツ配信ネットワークにおける米国連邦政府の資金提供による研究プロジェクトです。

これはCoralと呼ばれ、任意のURL に追加.nyud.netすることで機能します。たとえば、

http://www.example.com/static/MyFont.ttf

になる

http://www.example.com.nyud.net/static/MyFont.ttf.

他に何もすることはありません。最初のリクエストで、Coral サーバーはファイルをフェッチしてキャッシュし (多少の遅延が予想されます)、再度チェックせずにファイルを提供します (新しいバージョンを頻繁にチェックしないだけです)。

高度な DNS 拡張であるDNAMEレコードを使用しているため、非常に古いオペレーティング システムや DNS リゾルバーでは機能しない可能性がありますが、最新のものであれば機能することが知られています。このようにして、要求は地理的に近いサーバーにルーティングされます。

于 2012-01-13T00:42:57.160 に答える