针对移动和 CSS @font-face 进行优化

Posted 2023-03-15

【中文标题】针对移动和 CSS @font-face 进行优化

【英文标题】：Optimizing for Mobile and CSS @font-face

【发布时间】：2014-10-02 10:40:39

【问题描述】：

根据客户的意愿，我们在主要 CSS 中为应该接收大量移动流量的网站设置两个 @font-face 规则。除非使用 SVG 版本，否则这些文件的任何一组（例如 otf）大约为 130KB。

查看 Chrome 中的开发控制台，它们似乎在每次加载时返回 200，而不是 304 Not Modified 标头，这让我认为它们是每个页面加载权重的一部分。

所以我的两个问题是，是否有人知道这是否准确？

如果移动访问者必须在每次页面加载时提取这两个文件，我将更改媒体查询，以便至少不会为手机提取这些文件...

欢迎任何其他移动 CSS 优化技巧。

@font-face 
 font-family: 'SouvenirBQ-Medium';
 src: url('../fonts/SouvenirBQ-Medium.eot?') format('eot'), url('../fonts/SouvenirBQ-Medium.otf') format('opentype'), url('../fonts/SouvenirBQ-Medium.woff') format('woff'), url('../fonts/SouvenirBQ-Medium.ttf') format('truetype'), url('../fonts/SouvenirBQ-Medium.svg#SouvenirBQ-Medium') format('svg');

 @font-face 
 font-family: 'TrajanPro-Bold';
 src: url('../fonts/TrajanPro-Bold.eot?') format('eot'), url('../fonts/TrajanPro-Bold.otf') format('opentype'), url('../fonts/TrajanPro-Bold.woff') format('woff'), url('../fonts/TrajanPro-Bold.ttf') format('truetype'), url('../fonts/TrajanPro-Bold.svg#TrajanPro-Bold') format('svg');

编辑 根据这篇文章，我将以下内容添加到我的 htaccess 文件中以尝试缓存字体文件

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts to make browsers cache
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

但是浏览器继续显示 200 字体而不是 304 Not modified 响应。

当前响应标头显示过期日期：

Accept-Ranges:bytes
Cache-Control:max-age=31536000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:33841
Content-Type:application/x-font-opentype
Date:Sun, 10 Aug 2014 21:01:46 GMT
ETag:"b18f2a-e070-4fe3cfaf9a440"
Expires:Mon, 10 Aug 2015 21:01:46 GMT
Keep-Alive:timeout=5, max=94
Last-Modified:Tue, 15 Jul 2014 15:22:49 GMT
Server:Apache
Vary:Accept-Encoding

有什么想法吗？

【问题讨论】：

css-tricks.com/preventing-the-performance-hit-from-custom-fonts -- 对您的情况很有帮助

@BootstrapThemer 你应该添加这个作为答案！

你添加它，我会投票给你。太困了。

【参考方案1】：

您当然可以缓存字体文件，因为从现在开始，所有 google 字体都有一个过期标题。

您确定为您的字体请求设置了正确的标题吗？在使用媒体规则删除它们之前，我会调查这个问题。

【讨论】：

此站点托管在共享服务器上。可以通过 htaccess 指定文件类型的标题吗？

确实可以...***.com/questions/13429540/…

添加了远期过期标头，在响应标头中看到它们，但文件仍然有 200。如果缓存我应该看到 304，对吧？

你应该看看这个答案：***.com/questions/8858159/…你需要的不仅仅是这个。