通过标签引入Google Fonts，如Roboto和Open Sans，再在CSS中用font-family调用，可快速使用网络字体。1. 访问Google Fonts网站选择字体并复制代码到HTML的中；2. 在CSS中使用font-family属性指定字体名称，建议用单引号包裹；3. 需要多种字体或字重时，在URL中添加多个family参数；4. 注意网络访问限制、使用&display=swap优化加载性能，并按需加载以减少资源浪费。
在网页中使用 Google Fonts，最简单的方式是通过 标签在 HTML 的 中引入字体样式。这样浏览器会自动加载对应的字体文件，你可以在 CSS 中直接使用这些字体。
1. 获取 Google Fonts 的 link 链接
访问 Google Fonts 网站，搜索并选择你需要的字体，比如 "Roboto" 或 "Open Sans"。点击“Select this style”后，右侧会弹出一个面板，显示嵌入代码。
你会看到类似这样的 代码：
将这段代码复制并粘贴到你的 HTML 文件的 区域中。
立即学习“前端免费学习笔记（深入）”；
2. 在 CSS 中使用该字体
引入成功后，你就可以在 CSS 中通过 font-family 使用这个字体了。
例如：
body {font-family: 'Roboto', sans-serif;
}
注意：字体名称建议用单引号包裹，尤其是包含空格或多词的字体名。
3. 加载多种字体或字重
如果你需要多个字体或不同字重（如粗体、斜体），可以在 URL 中添加更多参数。
例如同时加载 Roboto 和 Open Sans：
googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">然后在 CSS 中分别使用：
h1 {font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
4. 注意事项
- 确保网络可访问 Google Fonts，某些地区可能需要代理或使用本地替代方案。
-
&display=swap表示字体加载时使用备用字体，等下载完成再替换，提升页面渲染速度。 - 如果项目对性能敏感，可考虑只加载需要的字重，避免加载过多样式。
