Używam @ font-face do osadzenia czcionki hostowanej na TypeFront, ale moja czcionka nie jest buforowana przez przeglądarkę (Firefox 3.6.13 i Epiphany 2.30.2). Powoduje to pojawienie się FOUC (Flash of Unstyled Content) w Firefoksie i MFOMT (Momentary Flash of Missing Text, właśnie to zrobiłem) na Epiphany za każdym razem, gdy strona się ładuje (po raz pierwszy mam OK z FOUC/MFOMT strona ładuje się, ale nie za każdym razem).buforowanie czcionek czcionek
Próbuję uniknąć konieczności osadzania czcionki w CSS w Base64, jeśli jest to możliwe, i nie mogę sam hostować czcionki.
Dlaczego czcionka nie jest zapisana w pamięci podręcznej? Czy istnieje alternatywna usługa hostingu darmowych czcionek, która nie ma tego problemu?
strona testowa:
<!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>
Gdybym obserwować w Firebug, zakładka netto pokazuje, że czcionka jest podawane z „200 OK” każdy czas wczytywania strony zamiast „304 Not Modified” lub innych oznaczeń używana jest pamięć podręczna (np. przeglądarka nie próbuje nawet żądania HTTP).
nagłówków 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
W żądaniu nie ma nagłówka "modified-since-from", więc serwer nie ma opcji "nie zmodyfikowano". Problem dotyczy klienta: dlaczego wysyła żądanie w ogóle, ponieważ istnieje nagłówek Expires w przyszłości? Dlaczego nie ma nagłówka if-modified-since i/lub nagłówka If-None-Match? Okay, można to wyjaśnić, nie ma etag w odpowiedzi, więc jest oparty na znaczniku czasu, ale to powinno wystarczyć, i nie ma Last-Modified, więc nie jest zmodyfikowany jeśli-albo. Ale znowu, nagłówek (daleko) wygasa w przyszłości, powinien zapobiec wszelkim (drugim) żądaniom. –
Mam MFOMT również w Firefoksie, ale, jak zauważyłem, dzieje się tak dlatego, że Firebug jest aktywny. No Firebug => 304 na czcionkach (dostarczanych lokalnie). – Claudio