Lie*_*yan 14 browser-cache font-face
我正在使用@ 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>
如果我在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 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
2016 年 11 月更新：如下所述的 Coral 内容分发网络不再运行。
这是一个相当通用的“解决方案”。有一个生产服务，运营多年，向公众开放（尽管检查他们的商业使用条款，我不知道它是否合适）。这是美国联邦政府资助的内容分发网络研究项目。
它称为Coral，通过附加.nyud.net到任何URL 来工作，例如
http://www.example.com/static/MyFont.ttf
变成
http://www.example.com.nyud.net/static/MyFont.ttf.
没有其他事可做。在第一个请求时，Coral 服务器会获取并缓存文件（预计会出现一些延迟），然后它们会提供该文件而无需再次检查（它们很少检查新版本）。
它使用高级 DNS 扩展DNAME记录，因此它可能无法与非常旧的操作系统或 DNS 解析器一起工作，尽管已知最近的任何东西都可以工作。这样，请求就会被路由到地理位置较近的服务器。