@font-face 使用指南：如何在 CSS 中加载自定义字体

@font-face 是 CSS 中一个强大的指令，允许您在网站中使用任何自定义字体，而不仅仅局限于系统默认字体。这使得您可以为您的网站创造独特的外观，并更好地表达您的品牌形象。

如何使用 @font-face

要使用 @font-face 加载自定义字体，您需要完成以下步骤：

选择字体文件： 您可以从 Google Fonts 或其他字体库中下载免费字体，也可以购买商用字体。
将字体文件上传到您的网站： 确保您将字体文件放在网站的正确位置，并在 CSS 文件中使用正确的路径。
使用 @font-face 规则： 在 CSS 文件中添加 @font-face 规则，指定字体名称、字体文件路径、格式等信息。
在 CSS 中应用字体： 在 CSS 中使用 font-family 属性应用您刚刚定义的自定义字体。

代码示例

以下示例展示如何使用 @font-face 加载名为 'lovely' 的字体：

.post-TianliGPT {
  @font-face {
    font-family: 'lovely';
    src: url('https://www.fiii.cn/fiii/font/ng.woff2') format('woff2');
    font-display: swap;
  }
  font-family: 'lovely';
}

说明：

font-family: 'lovely'; 定义了字体的名称。
src: url('https://www.fiii.cn/fiii/font/ng.woff2') format('woff2'); 指定了字体文件路径和格式。
font-display: swap; 确保字体在加载过程中不会影响页面显示，而是以默认字体显示，直到自定义字体加载完成。

最佳实践

使用多个格式的字体文件，例如 woff2、woff、ttf，以确保您的字体在不同浏览器中都能正常显示。
使用 font-display 属性控制字体加载方式，避免影响页面显示速度。
使用字体压缩工具，例如 FontSquirrel，减小字体文件大小，提升页面加载速度。

结论

使用 @font-face 可以让您轻松地在网站中使用自定义字体，为您的网站带来独特的外观和个性化的风格。通过了解 @font-face 的使用方法和最佳实践，您可以有效地提升网站的视觉效果和用户体验。