利用腾讯云EdgeOne提速，解决woff2字体显示慢的问题

原创

李洋博客

修改于 2024-11-05 15:39:57

5.5K00

代码可运行

文章被收录于专栏：李洋博客李洋博客

运行总次数：0

代码可运行

大家应该很熟悉字体文件，尤其主题模板在开发上架之后会给大家一些优化建议，但是使用字体文件显示网站内容的时候大家应该都遇到过，那就是加载缓存，加载后才能显示自定义字体文件，之前介绍过个人博客站使用自定义字体去美化的教程，但却忽略了字体文件较大导致延迟显示的问题，最近一直在用腾讯云的 EdgeOne，我们可以设置下字体加载策略，以此来解决延迟显示的问题。

缓存优化

我们可以在EdgeOne后台设置缓存优化，确保CDN设置合理的缓存策略，使得返回的字体文件能够被用户的浏览器缓存，减少重复请求，另外设置较长的缓存过期时间（TTL），对于不经常更新的字体文件，可以设置TTL为一年或更长。

设置方法，登录EdgeOne后台，点击【站点列表】，找到【站点加速】，在右侧选择【规则引擎】，点击已经创建好的规则，如果没有规则可以创建，如下图：

设置添加一个【elseif】，选择【文件后缀】，运算符【等于】，值设置如下：【woff2，woff，ttf】（如果有其他格式可以添加），然后操作分别选择【节点缓存TTL】和【浏览器缓存TTL】，行为设置【自定义时间】，时间可以设置成【365】天，也就是一年，因为字体文件本身就不需要经常更换，所以可以相对设置时间多一年，开启【忽略大小写】和【强制缓存】开关，如图：

如图设置好之后，点击顶部【保存并发布】即可。

文件压缩

虽然WOFF2已经是经过优化的字体格式，但确保EdgeOne支持并开启了压缩功能，如gzip或Brotli压缩，可以进一步减小文件体积。设置如下，点击【站点全局配置】，在下方功能选项找到【文件优化】将Gzip和Brotli全局开启功能开关打开，如图：

至此字体优化在腾讯云EdgeOne已经设置完成，稍等一小会等待部署完成生效，期间我们回到服务器，再去设置下字体加载策略：利用font-display属性控制字体的加载行为，例如设置为swap可以让浏览器在字体加载期间使用备用字体，从而提升性能并减少流量。

预连接和预加载

通过在HTML中使用link标签的rel="preload"属性来预加载关键的字体文件，优化加载时间。使用dns-prefetch和preconnect来提前解析CDN域名的DNS和建立连接。

@font-face{
    font-family:HarmonyOS_Sans_SC;
    font-style:normal;
    font-display:swap;
    src:url(/tools/fonts/HarmonyOS_Sans.subset.woff2) format('woff2');
}
body,a{font-family:HarmonyOS_Sans_SC;}

【HarmonyOS_Sans_SC】字体文件名称，url是字体文件的路径，这样，即使字体文件尚未加载完成，浏览器也会使用备用字体显示文本，从而提升性能。本站开发主题模板，复制如上代码（主题替换字体名称和路径）粘贴到主题设置，自定义css接口即可。

预加载字体文件

在网页的<head>部分，使用<link>标签的rel="preload"属性来预加载关键的字体文件。

<link rel="preload" href="/tools/fonts/HarmonyOS_Sans.subset.woff2" as="font" type="font/woff2" crossorigin>

如果是我的主题模板，可以在广告设置选项卡里找到【广告设置】，在【网页头部接口（非广告代码）】接口添加如上代码即可。通过上述方法的组合使用，可以有效降低WOFF2字体文件在CDN上的流量消耗。这时回到首页前端刷新页面，你会发现自定义字体直接显示，不再延迟显示了，但是需要注意，预加载可能会存在增加耗费少量 CDN 流量问题，请自行对比后考虑是否使用。好了，感兴趣的可以自行测试下效果吧，有其他问题留言反馈吧。

EdgoOne活动链接：（通过指定链接才能参与活动！！！） https://cloud.tencent.com/act/pro/double11-2024?fromSource=gwzcw.8891729.8891729.8891729

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯云双十一抄作业