缓存 font-face 字体

发布于 2024-10-19 21:05:52 字数 1833 浏览 0 评论 0原文

我正在使用 @font-face 嵌入 TypeFront 上托管的字体，但浏览器（Firefox 3.6.13 和 Epiphany 2.30.2）未缓存我的字体。这导致每次页面加载时，Firefox 上都会出现 FOUC（无样式内容的闪现）和 Epiphany 上的 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 中观察到，“网络”选项卡显示每次页面加载时都会显示“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

原文

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).

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?

Test page:

<!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>

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 headers:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

喜爱纠缠 2024-10-26 21:05:52

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 解析器一起工作，尽管已知最近的任何东西都可以工作。这样，请求就会被路由到地理位置较近的服务器。

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.

It is called Coral and works by appending .nyud.net to any URL, for example

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

becomes

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

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).

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.

回复收藏 0 原文

~没有更多了~