кэширование шрифтов шрифтов - PullRequest
14 голосов
/ 26 февраля 2011

Я использую @ font-face для встраивания шрифта, размещенного на TypeFront, но мой шрифт не кэшируется браузером (Firefox 3.6.13 и Epiphany 2.30.2).Это вызывает FOUC (Flash из Unstyled Content) в Firefox и MFOMT (Momentary Flash of Missing Text, я только что сделал это) в Epiphany каждый раз, когда страница загружается (я в порядке с FOUC / MFOMT в первый разстраница загружается, но не каждый раз).

Я стараюсь избегать необходимости вставлять шрифт в CSS в Base64, если это возможно, и я не могу сам разместить шрифт.

Почему шрифт не кэшируется?Есть ли альтернативный бесплатный хостинг шрифтов, у которого нет этой проблемы?

Тестовая страница:

<!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, вкладка Net показывает, что шрифт обслуживается "200 OK "каждый раз, когда страница загружается, вместо" 304 Not Modified "или других указаний на то, что используется кэшированный шрифт (например, браузер даже не пытается 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

1 Ответ

3 голосов
/ 13 января 2012

ОБНОВЛЕНИЕ ноябрь 2016 г. : сеть распространения контента Coral, описанная ниже, больше не работает.


Это довольно общее «решение». Существует производственная служба, работающая годами, открытая для общественности (хотя проверяйте их условия для коммерческого использования, я не знаю, подходит ли она). Это финансируемый федеральными властями США исследовательский проект в сети распространения контента.

Он называется Коралл и работает путем добавления .nyud.net к любому URL, например

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

становится

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

Больше нечего делать. По первому запросу серверы Coral извлекают и кэшируют файл (ожидают некоторой задержки), а затем обслуживают его без повторной проверки (они редко проверяют наличие новых версий).

Он использует расширенное расширение DNS, DNAME records, поэтому он может не работать с очень старыми операционными системами или распознавателями DNS, хотя известно, что работает что-то сравнительно недавнее. Таким образом, запросы направляются на географически близкий сервер.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...