📌  相关文章
📜  如何导入谷歌字体 - Html (1)

📅  最后修改于: 2023-12-03 15:09:05.633000             🧑  作者: Mango

如何导入谷歌字体 - Html

HTML 页面中使用自定义字体是很常见的。谷歌提供了很多优美的免费字体，我们可以直接在网页中使用它们。本文将介绍如何导入谷歌字体到 HTML 页面。

步骤
1. 在 Google Fonts 中选择字体

在 Google Fonts 中找到你需要的字体，然后点击 "Select this Style" 按钮。你也可以选择多个字体。

2. 在 Google Fonts 中获取代码

点击屏幕顶部的 "Use" 按钮，进入 "Add this code to your website" 页面。这里提供了几种导入字体的方式。我们选择 "Standard" 页面底部的一段代码。

<link href="https://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet">

将 Font+Name 替换为你选择的字体名称。多个字体之间用 | 分隔。例如，如果你选择了 "Open Sans" 和 "Roboto" 两个字体，则代码应该是这样的：

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
3. 在 HTML 页面中导入字体

将上一步得到的代码复制到 HTML 页面中。通常把它放在 <head> 标签中。

<!DOCTYPE html>
<html>
<head>    
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
    <p style="font-family: 'Open Sans';">This text is in Open Sans.</p>
    <p style="font-family: Roboto;">This text is in Roboto.</p>
</body>
</html>

请注意，font-family 属性值中的字体名称应该用引号包括起来，多个字体之间用逗号分隔。

总结

此处我们介绍了如何导入谷歌字体到 HTML 页面。

  • 在 Google Fonts 中选择字体。
  • 在 Google Fonts 中获取代码。
  • 在 HTML 页面中导入字体。

这些步骤能够帮助我们在 HTML 页面中使用谷歌字体。