📌  相关文章
📜  如何在 HTML 中导入 Google 字体？(1)

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

如何在 HTML 中导入 Google 字体？

在网站设计中，字体是非常重要的一个元素，可以增强网站的视觉效果及用户体验。而 Google 字体库提供了丰富的字体选择，能够让我们的网站看起来更加美观。

那么如何在 HTML 中导入 Google 字体呢？下面将给出详细介绍。

步骤一：选择 Google 字体

访问 Google Fonts 网站（https://fonts.google.com/），选择一个或多个想要使用的字体。

步骤二：获取字体链接

在选择完字体之后，点击 "Select this style" 按钮，再点击 "Use" 按钮，此时会弹出一个新窗口，里面是你需要的字体链接。

选中想要使用的链接，复制它。

步骤三：将字体链接添加到 HTML 中

在需要使用该字体的 HTML 文件中，将复制的字体链接添加到 head 标签中，例如：

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700&amp;display=swap" rel="stylesheet">
    <title>My Website</title>
</head>
<body>
  <!-- 此处为网页主体内容 -->
</body>
</html>

在这个例子中，我们添加了一个名为 "Noto Sans SC" 的字体，它有四种不同的字重（100、300、400、500、700）。链接末尾的 &amp;display=swap 表示将字体样式以 Fallback 和 Swap 两种模式渲染，充分利用缓存可以提高字体渲染速度。

步骤四：应用字体

此时，我们就可以在网页中应用我们导入的 Google 字体了，例如：

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700&amp;display=swap" rel="stylesheet">
    <title>My Website</title>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
    </style>
</head>
<body>
  <p>这是一个使用 Noto Sans SC 字体的段落。</p>
</body>
</html>

在 CSS 中，我们可以使用 font-family 属性来应用字体，与导入的字体名称相同，例如上例中的 'Noto Sans SC', sans-serif。

总结

以上就是如何在 HTML 中导入 Google 字体的介绍。通过以上步骤，我们可以轻松实现网页字体的美化。