缓存font-face字体。

15
我使用 @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 嵌入字体,并且我无法自己托管字体。
为什么字体没有被缓存?是否有任何替代免费字体托管服务可以避免此问题?
测试页面:
<!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

请求中没有if-modified-since头,因此服务器无法选择说“未修改”。问题出在客户端:既然将来有一个过期的标头,为什么还要发送请求?为什么没有if-modified-since头和/或没有If-None-Match头?好吧,这可以解释,响应中没有etag,因此基于时间戳,但应该足够了,并且没有Last-Modified,因此也没有if-modified-since。但是再次强调,(远)未来的过期标头应该防止任何(第二个)请求发生。 - Mörre
我在Firefox中也有MFOMT,但是我注意到这是由于Firebug处于活动状态。没有Firebug => 字体304(本地交付)。 - Claudio
1个回答

3

更新于2016年11月:下面所描述的Coral内容分发网络已经不再运营。


这是一个相当通用的“解决方案”。有一个生产服务,已经运营多年,对公众开放(虽然请查看他们的商业使用条款,我不知道是否符合)。这是一个由美国联邦资助的研究项目,在内容分发网络中。

它被称为Coral,通过在任何URL后附加.nyud.net来工作,例如

http://www.example.com/static/MyFont.ttf

变成

http://www.example.com.nyud.net/static/MyFont.ttf.

没有其他事情需要做。在第一次请求时,Coral服务器会获取并缓存文件(可能会有些延迟),然后在不再检查的情况下提供服务(它们仅会偶尔检查新版本)。

它使用了高级DNS扩展——DNAME记录,因此可能无法与非常古老的操作系统或DNS解析器配合使用,但已知任何相对较新的系统都可以正常工作。这样,请求就会路由到地理位置接近的服务器。


这不再是一个有效的答案。 - naspinski
1
coralcdn.org 仍然在线,但是确实,该服务似乎不再工作了,感谢提醒。 - ՕլՁՅԿ

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接