我使用 @font-face 嵌入 TypeFront 托管的字体,但我的字体未被浏览器缓存(Firefox 3.6.13 和 Epiphany 2.30.2)。这会导致 Firefox 上的 FOUC (Flash of Unstyled Content) 和 Epiphany 上的 MFOMT (Momentary Flash of Missing Text,我刚刚编了个词) 每次加载页面时都会出现(我可以接受页面第一次加载时出现 FOUC/MFOMT,但不希望每次都出现)。
如果可能,我想避免在 CSS 中使用 Base64 嵌入字体,并且我无法自己托管字体。
为什么字体没有被缓存?是否有任何替代免费字体托管服务可以避免此问题?
测试页面:
如果可能,我想避免在 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