【Web技术】2127- 前端字体渲染闪烁？来试试预加载

最新推荐文章于 2025-03-05 20:21:01 发布

pingan8787

最新推荐文章于 2025-03-05 20:21:01 发布

阅读量278

点赞数

文章标签：前端

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA==&mid=2458474755&idx=1&sn=0a6b3867d80daab7da215a0decafaa1d&chksm=b05e822d106adae17036c26dd73e58d2bb71070d9087ba0a9116450f9f8241e8f2293d3882ec&scene=126&sessionid=0

版权

闪烁问题原因？

其实这里背后的原因很简单就是，我们没有提前加载字体包，导致进入页面使用到了字体然后进行网络请求，但由于网络请求需要一段时间向服务端获取资源，这段时间前端页面会使用默认字体，此时从默认字体转化为请求的字体就出现闪烁。

33f66144c3fecf45bc43b564c736033.png

使用 css发送网络请求加载字体

@font-face{
    font-family: 'JD-UDC-Bold';
    font-display: swap;
    src: url('./JD-UDC-Bold.otf')
}

以上代码应该比较容易理解，font-family 和 src 就不和大家讲解了，可以去看MDN^[1]

font-display 可选参数

/* 关键字值 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

| 属性值      | 描述                                               |
| -------- | ------------------------------------------------ |
| auto     | 默认值。浏览器根据情况决定如何处理字体显示。                           |
| block    | 在字体加载完成之前，使用占位符进行显示，避免文本闪现或导致布局变化。               |
| `swap`   | 在字体加载完成之前，**使用与自定义字体相似的系统默认字体进行显示**，保持整体布局的稳定性。  |
| fallback | 在字体加载完成之前，使用与自定义字体相似的系统默认字体进行显示，并在加载完成后切换为自定义字体。 |
| optional | 优先显示系统默认字体，在自定义字体在加载期间可用时切换为自定义字体。               |

## 如何解决 ？

在下给大家提供两种方案

### 1：使用 JS 预加载 字体包

此方案也是当前生产上正在使用的方式，使用JS提供的内置API `FontFace` 进行请求

```js
async loadFund () { 
    const fontList = ['JR-UDC-Bold.otf' , 'JR-UDC-Light.otf'] // 定义字体文件名称
    for(const fontResolveUrL of fontList){ // 循环字体文件名称
        if(typeof FontFace !==  'undefined'){ // 适配低版本 不支持 FontFace 的情况
            const fontInstance = new FontFace(fontResolveUrL.replace(/.otf/ , '') , `url(../fonts/${fontResolveUrL})`) // 如果浏览器支持 FontFace 则创建实例
            await fontInstance.load() // 开始加载字体
        }else{
            // 不兼容 可以手动发送一个 get请求 请求服务器资源
        }
    }
}
setTimeout(loadFund , 500)// 使用 异步加载不要影响页面的FCP
```

以上代码 主要的逻辑时 以下几点

1.  定义异步函数
1.  循环加载字体
1.  判断浏览器是否支持FontFace ，不支持可以走 else 手动获取 服务器资源

当你使用 FontFace 对象加载的时候 ， 其实内部 帮你发送网络请求，获取服务器资源。

![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/ba3b9087b89e423ea937319f4768c5a7~tplv-73owjymdk6-watermark.image?policy=eyJ2bSI6MywidWlkIjoiMzA2MTQ3NjEzMDA0NDQ4NyJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1722318005&x-orig-sign=gNYonrU468W8B%2BbW6C2vAT%2Boc3Y%3D)

#### FontFace 的参数

`new FontFace('字体名称' , 字体资源路径 , 选项描述)` ，详细信息你可以参考[FontFace MDN](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FFontFace%2FFontFace "https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace")

### 2：使用css加载 字体包

```css
@font-face {
    font-family: 'MyFont';
    src: url('path/to/your/font.woff2') format('woff2'), 
    url('path/to/your/font.woff') format('woff'), 
    url('path/to/your/font.ttf') format('truetype'); 
    font-weight: normal; font-style: normal; 
}
```

## 总结

闪烁的问题来源于 字体没有被加载，当被加载之后 css渲染解析时，可以直接获取到资源，无需等待网络请求缓冲过程。