如何用css link加载Google Fonts样式

通过标签引入Google Fonts，如Roboto和Open Sans，再在CSS中用font-family调用，可快速使用网络字体。1. 访问Google Fonts网站选择字体并复制代码到HTML的中；2. 在CSS中使用font-family属性指定字体名称，建议用单引号包裹；3. 需要多种字体或字重时，在URL中添加多个family参数；4. 注意网络访问限制、使用&display=swap优化加载性能，并按需加载以减少资源浪费。

在网页中使用 Google Fonts，最简单的方式是通过 <link> 标签在 HTML 的 中引入字体样式。这样浏览器会自动加载对应的字体文件，你可以在 CSS 中直接使用这些字体。

1. 获取 Google Fonts 的 link 链接

访问 Google Fonts 网站，搜索并选择你需要的字体，比如 "Roboto" 或 "Open Sans"。点击“Select this style”后，右侧会弹出一个面板，显示嵌入代码。

你会看到类似这样的 <link> 代码：

将这段代码复制并粘贴到你的 HTML 文件的 区域中。

2. 在 CSS 中使用该字体

引入成功后，你就可以在 CSS 中通过 font-family 使用这个字体了。

例如：

盘古大模型

华为云推出的一系列高性能人工智能大模型

207 查看详情 body {
  font-family: 'Roboto', sans-serif;
}

注意：字体名称建议用单引号包裹，尤其是包含空格或多词的字体名。

3. 加载多种字体或字重

如果你需要多个字体或不同字重（如粗体、斜体），可以在 URL 中添加更多参数。

例如同时加载 Roboto 和 Open Sans：

然后在 CSS 中分别使用：

h1 {
  font-family: 'Roboto', sans-serif;
}
p {
  font-family: 'Open Sans', sans-serif;
}

4. 注意事项

• 确保网络可访问 Google Fonts，某些地区可能需要代理或使用本地替代方案。
• &display=swap 表示字体加载时使用备用字体，等下载完成再替换，提升页面渲染速度。
• 如果项目对性能敏感，可考虑只加载需要的字重，避免加载过多样式。

基本上就这些。加个 link，再写个 font-family，就能用上漂亮的 Google 字体了。

以上就是如何用css link加载Google Fonts样式的详细内容，更多请关注其它相关文章！