可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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.

文章来源: caching font-face fonts

标签

font