gpt4 book ai didi

font-face - 缓存字体字体

转载 作者:行者123 更新时间:2023-12-03 22:42:18 32 4
gpt4 key购买 nike

我正在使用 @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 中观察,Net 选项卡会显示每次页面加载时字体都带有“200 OK”,而不是“304 Not Modified”或其他正在使用缓存字体的指示(例如,浏览器甚至没有尝试HTTP 请求)。

HTTP header :
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 月更新 :Coral 内容分发网络(如下所述)不再运行。

这是一个相当通用的“解决方案”。有一个生产服务,已经运行多年,向公众开放(尽管检查他们的商业用途条款,我不知道它是否合适)。它是美国联邦政府资助的内容分发网络研究项目。

它被称为 Coral并通过附加 .nyud.net 工作至 任何 网址,例如

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

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

没有其他事情可做。在第一个请求中,Coral 服务器获取并缓存文件(预计会有一些延迟),然后它们在不再次检查的情况下提供它(它们很少检查新版本)。

它使用高级 DNS 扩展, DNAME记录,因此它可能不适用于非常旧的操作系统或 DNS 解析器,尽管已知任何最近的东西都可以工作。这样,请求就会被路由到地理位置相近的服务器。

关于font-face - 缓存字体字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5127168/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com