推荐使用link标签引入google fonts，如roboto和open sans，并通过css调用；也可在css中用@import方式引入，但性能较差；支持按需加载特定字重如wght@400;700以优化速度；建议设置&display=swap避免文字空白，提升加载体验。
在网页开发中，使用美观的字体能显著提升用户体验。Google Fonts 提供了大量免费、高质量的开源字体，通过简单的 CSS 引入方式即可在项目中快速应用。以下是几种常见的引入 Google Fonts 字体的方法。
1. 使用 link 标签引入（推荐）
最常用的方式是在 HTML 文件的<link> 标签，指向 Google Fonts 的字体资源。
例如，引入 "Roboto" 和 "Open Sans" 字体：
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet">
然后在 CSS 中使用：
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Open Sans', sans-serif;
}
优点：简单直接，兼容性好，适合大多数项目。
2. 使用 @import 在 CSS 中引入
如果希望将字体引入写在 CSS 文件内部，可以使用@import 指令。
在 CSS 文件顶部添加：
立即学习“前端免费学习笔记（深入）”；
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
注意：@import 必须放在 CSS 文件的最开始位置，否则无效。性能上略逊于 link 方式，因为会阻塞 CSSOM 构建。
3. 加载特定字重和样式
Google Fonts 支持按需加载指定字重（font-weight）和斜体（italic）等变体，减少不必要的资源加载。例如，只加载 Roboto 的 400 和 700 字重：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
CSS 中对应使用：
p {
font-weight: 400;
}
.bold {
font-weight: 700;
}
这样可以有效优化页面加载速度。
4. 设置 display 属性优化渲染体验
Google Fonts 链接中的&display=swap 参数用于控制字体加载期间的文本显示行为。
- display=swap：使用系统字体临时替代，等自定义字体加载完成后再替换，避免文字长时间空白（FOIT）。
- 其他可选值：
block、fallback、optional，根据性能与体验需求选择。
&display=swap，以提升页面可读性和加载流畅度。
基本上就这些。通过 link 引入 + 按需加载 + 合理设置 display，就能高效使用 Google Fonts 字体，让网页排版更出彩。不复杂但容易忽略细节。
