CSS – ‘Open Sans’ 字体

在本文中，我们将介绍如何在 CSS 中应用 ‘Open Sans’ 字体，并给出一些示例。

阅读更多：CSS 教程

‘Open Sans’ 字体简介

‘Open Sans’ 是一种广泛使用的无衬线字体，由 Steve Matteson 设计，适用于数字屏幕和打印出版物。这款字体具有清晰的字形和舒适的阅读体验，因此在 Web 上非常受欢迎。

‘Open Sans’ 字体是开源字体，可在 Google Fonts 网站免费下载和使用。通过在 CSS 中引入字体文件，我们可以在网页上应用这种字体。

在 CSS 中引入 ‘Open Sans’ 字体

要在 CSS 中引入 ‘Open Sans’ 字体，我们需要完成以下步骤：

在网页的 <head> 标签中添加以下代码，以从 Google Fonts 引入 ‘Open Sans’ 字体：

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">

确保上述代码位于其他样式表的引入之前，以确保正确加载字体。

在 CSS 中应用 ‘Open Sans’ 字体

一旦我们成功引入了 ‘Open Sans’ 字体，就可以在 CSS 中应用它了。例如，我们可以使用以下代码将 ‘Open Sans’ 应用于整个网页的正文：

body {
  font-family: 'Open Sans', sans-serif;
}

在上面的代码中，font-family 属性指定使用 ‘Open Sans’ 字体，并在字体无法加载时回退到系统默认的无衬线字体。

我们还可以通过指定不同的字体粗细来应用不同样式的 ‘Open Sans’ 字体。示例如下：

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.bold-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

在上面的代码中，我们分别给 <h1>、<p> 和 class 为 .bold-text 的元素应用了不同粗细的 ‘Open Sans’ 字体。这样可以改变文本的外观并突出显示重要内容。

示例

下面是一个使用 ‘Open Sans’ 字体的示例网页：

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }

    h1 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
    }

    p {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
    }

    .bold-text {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>'Open Sans' 字体示例</h1>

  <p>这是正常的 'Open Sans' 文本。</p>

  <p class="bold-text">这是粗体的 'Open Sans' 文本，用于突出显示重要内容。</p>
</body>
</html>

在上面的示例中，我们应用了 ‘Open Sans’ 字体，并在不同的元素中展示了不同样式的文本。你可以通过浏览器查看该示例，以了解具体效果。