实现字体文件最后再加载
今天在优化主题的时候遇到的问题,发现字体文件的体积实在是太大了,即便是使用了cdn作为缓存,但是加载的时间还是过于久,会导致拖慢了全站的加载速度,于是便将字体样式通过异步加载的形式,让其不拖慢网站的加载速度。
实现
- 使用JavaScript动态加载字体:在页面的底部添加一个JavaScript脚本,在脚本中使用
@font-face
规则动态创建一个新的<style>
标签,并将字体文件链接放在其中。通过这种方式,字体文件将在页面的主要内容加载完毕后再加载。
// 创建一个新的<style>标签
var style = document.createElement('style');
// 将字体文件链接放在<style>标签中
style.textContent = `
@font-face {
font-family: 'MyFont';
src: url('path/to/font.woff2') format('woff2');
}
`;
// 将<style>标签添加到页面的头部或尾部
document.head.appendChild(style);
- 使用JavaScript异步加载字体文件:在页面底部添加一个
<script>
标签,通过异步加载字体文件。可以使用FontFace
API来实现异步加载字体文件。
// 异步加载字体文件
var myFont = new FontFace('MyFont', 'url(path/to/font.woff2) format("woff2")');
myFont.load().then(function(font) {
// 字体加载完成后,将其应用于页面中的元素
document.fonts.add(font);
});
如果使用异步加载字体,确保在应用该字体的元素可见之前,字体已经加载完成。否则,在字体加载完成之前,元素可能会显示默认字体或闪烁。可以使用font-display
属性来控制字体加载过程中的显示行为。
[...]继上篇文章网页字体文件最后再加载实现方法,后写的一篇优化加载字体在网页中的显示体验。上一篇文章的第一种方法,我在使用后,发现网页主体中的文字显示会延迟一段时间再加载,于是为了改进,又上网搜索相关内容,得出了本篇文章,优化方案。现在说说第三种方式,也是最近在使用的一种方式,我个人比较偏向第三种,使用webfontloader.js实现。webfontloader.js下载地址:webfontload[...]
[...]{/collapse-item}文章来自:吃猫的鱼博客(网页字体文件最后再加载实现方法)[...]