如何在网页中优雅地使用网络字体

本文分享一下在个人博客项目中使用网络字体的经验。字体对于一个网站的视觉效果和用户体验都有很大的影响，选择合适的字体能让整个页面看起来更有质感，也更有品牌特色。

为了提升阅读体验，我的博客使用的是霞鹜文楷字体，喜欢这个字体的朋友可以尝试加入自己的项目中~

但是呢，霞鹜文楷在 GitHub 上只提供了 .ttf 格式的文件，而在 web 上最佳的选择是 .woff2 格式，因为它更轻量、更适合网络加载。下面我分享如何在网页中使用这个字体，也会讲讲性能优化的小技巧，让你的网站既好看又流畅。

什么是网络字体？

网络字体（Web Fonts）就是可以通过网络加载的字体文件，允许我们在网页中使用用户设备上没有安装的字体。不仅能统一品牌视觉，还可以提升整体观感。

这里介绍几个好用的字体来源，大家可以根据项目需求选择：

接下来，我们看看如何加载这些网络字体。

霞鹜文楷的文件需要手动加入项目中，所以我们可以用 @font-face 来定义加载。

cssCopy

如果使用 Google Fonts，就非常简单了，直接用一行 link 标签即可：

htmlCopy

这样引入的好处是简单、稳定，但一些自定义字体则需要手动下载和转换为 .woff2 格式。

字体加载优化真的很重要，以下几个方法可以让页面加载更快，用户体验更好。

压缩字体文件：像 .woff2 本身就非常轻量；如果下载的是 .ttf 格式，可以用 font-squirrel 之类的工具进行格式转换和压缩。
懒加载字体：对于次要字体，可以考虑懒加载，这样首屏的渲染速度会快一些。
字体子集：如果字体包比较大，可以创建一个只包含需要字符的子集文件，这样字体文件会小很多。

使用字体时也要小心避免加载过慢或者页面闪烁的问题：

英文字符的字体文件通常较小，而中文字体文件则较大。如果只需部分中文字符，可以采用字体切割工具，比如 cn-font-split，生成包含所需字符的字体文件，减小体积并提升加载效率。