缓存字体字体 [英] caching font-face fonts
问题描述
我正在使用@ font-face嵌入TypeFront上托管的字体，但是浏览器（Firefox 3.6.13和Epiphany 2.30.2）未缓存我的字体。每次页面加载时，这都会在Epiphany上导致Firefox上的FOUC（未样式化内容的闪光）和MFOMT（丢失的文本的瞬时性闪光）（我很高兴第一次使用FOUC / MFOMT）页面加载，但并非每次都加载）。
I'm using @font-face to embed a font hosted on TypeFront, but my font is not cached by the browser (Firefox 3.6.13 and Epiphany 2.30.2). This is causing a FOUC (Flash of Unstyled Content) on Firefox and MFOMT (Momentary Flash of Missing Text, I just made that one up) on Epiphany every single time the page loads (I'm Ok with a FOUC/MFOMT the first time the the page loads, but not everytime).
如果可能的话，我试图避免将字体嵌入CSS的Base64中，而且我自己也无法托管字体。
I'm trying to avoid having to embed the font in CSS in Base64 if possible and I can't host the font myself.
为什么不缓存字体？有没有其他免费的字体托管服务，没有这个问题？
Why is the font not cached? Are there any alternative free font hosting service that does not have this problem?
测试页：
<!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中观察到，网络选项卡显示该字体每隔200个就可以显示一次页面加载的时间，而不是 304未修改或使用缓存字体的其他指示（例如，浏览器甚至没有尝试HTTP请求）。
If I observe in Firebug, the Net tab shows that the font is served with "200 OK" every time the page loads, instead of "304 Not Modified" or other indications that a cached font are being used (e.g. the browser not even attempting a HTTP request).
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月：下文所述的珊瑚内容分发网络已停止运行。
UPDATE Nov-2016: The Coral content distribution network, described below, is no longer in operation.
这是一个相当通用的解决方案。有多年生产服务，向公众开放（尽管检查其商业使用条款，但我不知道它是否适合）。这是内容分发网络中由美国联邦政府资助的研究项目。
This is a rather generic "solution". There is a production service, operating since years, open to the public (though check their terms for commercial use, I don't know if it fits). It is a US federally funded research project in a content distribution network.
它称为珊瑚，并且通过将 .nyud.net 附加到任何 URL（例如
It is called Coral and works by appending .nyud.net to any URL, for example
http://www.example.com/static/MyFont.ttf
成为
http://www.example.com.nyud.net/static/MyFont.ttf.
没有什么可做的。在第一个请求中，Coral服务器获取并缓存了文件（预计会有一些延迟），然后它们无需再次检查即可提供文件（它们不经常检查新版本）。
There is nothing else to do. On the first request, the Coral servers fetch and cache the file (expect some delay), and then they serve it without checking again (they only check infrequently for new versions).
它使用的是高级DNS扩展名， DNAME 记录，因此它可能无法在非常老的操作系统或DNS解析器中使用，尽管已知任何合理的方法都可以使用。这样，请求将路由到地理位置较近的服务器。
It is using an advanced DNS extension, DNAME records, so it might not work with very old operating systems or DNS resolvers, though anything reasonably recent is known to work. This way, requests are routed to a geographically close server.
这篇关于缓存字体字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
