我正在使用@ font-face嵌入在TypeFront上托管的字体,但浏览器不会缓存我的字体(Firefox 3.6.13和Epiphany 2.30.2).这导致每次页面加载时在Firefox和MFOMT(缺少文本的瞬间闪现,我只是在一个上面)的FOUC(Flash of Unstyled Content)在Epiphany上(我第一次使用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>
Run Code Online (Sandbox Code Playgroud)
如果我在Firebug观察,Net标签显示的字体被送达"200 OK"每一个页面加载的时间,而不是"304未修改"或其他迹象表明,正在使用一个缓存的字体(如浏览器甚至没有尝试一个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 …Run Code Online (Sandbox Code Playgroud)