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

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

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

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

---

什么是网络字体？

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

常见的网络字体来源

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

• Google Fonts：免费、简单易用，并且兼容性好。
• Adobe Fonts：提供了商业级别的字体库。
• Font Squirrel：这里提供了许多免费和商业字体的 .woff2 文件，很适合直接下载应用。

如何引入网络字体

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

使用 CSS @font-face 自定义加载字体

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

cssCopy
@font-face {
  font-family: 'LxgwWenKai';
  src: url('path-to-your-font/LxgwWenKai.woff2') format('woff2'), /* 推荐格式 */
       url('path-to-your-font/LxgwWenKai.ttf') format('truetype'); /* 备用格式 */
  font-weight: normal;
  font-style: normal;
}

从第三方字体库（如 Google Fonts）加载

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

htmlCopy

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

优化字体加载性能

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

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

避免性能问题的小技巧

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

• 减少字体样式：尽量精简字体的粗细和样式，这样能减少加载时间。
• 提前预加载字体：对主要字体用 rel="preload" 标签，可以在页面加载前就开始加载字体。

  htmlCopy

• 解决字体闪烁问题：可以使用 font-display: swap; 来避免页面加载字体前内容闪烁。

字体切割

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

字体推荐

• https://github.com/tonsky/FiraCode 免费 编程字体
• https://www.jetbrains.com/lp/mono/ 免费 编程字体
• https://github.com/lxgw/LxgwWenKai 免费 中文字体

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link rel="preload" href="path-to-your-font/LxgwWenKai.woff2" as="font" type="font/woff2" crossorigin>