返回博客

CSS 字体呈现优化

字体加载缓慢导致页面渲染缓慢，影响用户体验。本文介绍如何使用 `font-display` 等方法优化 CSS 字体呈现，从而提升页面加载速度。

全部 前端 (393) 运维 (77) 技术 (71) 后端 (25) 数据库 (10) 生活 (1)
Mt.r
|
#CSS

问题

字体加载慢，导致页面渲染慢，用户体验不好。

解决

font-display

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

具体细节可以看 font-display

后记

还有个字体加速

上一篇
CSS `display: kda2f` 研究：多个 div 在一个段落内显示
CSS `display: kda2f` 的使用研究：如何将多个 div 在一个段落内显示，以及解决`display: kda2f`下 `margin`失效的问题，并使用`line-height` 调整间距。
 下一篇
CSS text-indent 属性 (段前缩进)
CSS `text-indent` 属性用于设置文本的段落缩进。本文介绍如何使用 `text-indent` 属性实现段落前缩进，并提供示例代码。