如何利用 .woff 字体的浏览器缓存？

Posted 2023-02-15

【中文标题】如何利用 .woff 字体的浏览器缓存？

【英文标题】：How do I leverage browser caching of .woff fonts?

【发布时间】：2014-12-20 14:23:42

【问题描述】：

在 PageSpeed Insights 中，我不断看到消息以利用浏览器缓存我正在使用的特定图标集/字体：iconFont.woff（2 天）

我已将 .htaccess 设置为：

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/ttf "access 1 week"
ExpiresByType font/woff "access 1 week"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

尽管如此，我仍然在 PageSpeed Insights 中收到相同的消息。如何正确缓存它？

【问题讨论】：

也许字体/woff 不起作用，试试这个：***.com/questions/3594823/…

【参考方案1】：

在Seb's IT blog 的帮助下，这对我有用：

<IfModule mod_expires.c>
  # Activate mod
  ExpiresActive on

  # Declare fonts content-type
  AddType application/x-font-woff2 .woff2

  # Set cache duration
  ExpiresByType application/x-font-woff2  "access plus 1 month"

  # Append "public" to header "Cache-Control"
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

【参考方案2】：

这对我有用，因为 Google 页面速度不再要求修复它。 AddType 是必不可少的。

# Fonts
# 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
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts
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 application/font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"

【讨论】：

您好，我尝试在 .htaccess 中添加此内容，但添加此站点后加载站点时显示“500”内部服务器错误”。

@NileshKumar 在 ExpiresActive 上方添加 并在最后一行之后添加 ，它将修复您的错误

您是否还应该拥有AddOutputFilterByType DEFLATE application/x-font-woff 和AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 或者这些格式不提供压缩功能？

.woff2 文件呢？