15

我正在使用@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
4

1 回答 1

3

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 解析器一起使用,尽管已知任何合理的新事物都可以使用。这样,请求就会被路由到地理位置接近的服务器。

于 2012-01-13T00:42:57.160 回答