我正在使用@font-face 嵌入托管在 TypeFront 上的字体,但我的字体没有被浏览器缓存(Firefox 3.6.13 和 Epiphany 2.30.2)。这会导致每次页面加载时在 Firefox 上出现 FOUC(无样式内容的 Flash)和 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 中观察到,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