代码收藏家技术教程 2024-10-25

在HTML5中使用Noto Sans CJK字体的详细指南

方法一：通过Google Fonts在线加载Noto Sans CJK

步骤 1：访问Google Fonts并获取字体链接

步骤 2：获取字体的`<link>`标签

步骤 3：在HTML文件中引入字体

方法二：下载并本地托管Noto Sans CJK

步骤 1：下载字体文件

步骤 2：使用 `@font-face` 在CSS中加载字体

步骤 3：在HTML文件中应用字体

总结

在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK 是 Google 提供的一个优秀的免费字体系列，支持中文简体、繁体以及日文字符，具有简洁现代的风格。本文将详细介绍如何在HTML5项目中使用 Noto Sans CJK 字体，包括在线加载和本地托管两种方式。

方法一：通过Google Fonts在线加载Noto Sans CJK

这种方法无需下载字体文件，直接通过 Google Fonts 提供的链接在线加载字体，非常方便。

步骤 1：访问Google Fonts并获取字体链接

打开 Google Fonts.
在搜索框中输入 “Noto Sans CJK”。
根据需要选择字体的语言版本：
Noto Sans SC（简体中文）
Noto Sans TC（繁体中文）
Noto Sans JP（日文）

步骤 2：获取字体的`<link>`标签

选择所需的字重（如常规、加粗），Google Fonts 会生成一个包含字体的 <link> 标签。例如，选择 Noto Sans SC，Google Fonts 生成如下链接：

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

步骤 3：在HTML文件中引入字体

将复制的 <link> 标签添加到 HTML 文件的 <head> 部分中。然后在 CSS 中使用 font-family 应用字体：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用 Noto Sans CJK 字体</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans SC', sans-serif;
    }
  </style>
</head>
<body>
  <h1>这是 Noto Sans SC 字体的标题</h1>
  <p>这是使用 Noto Sans SC 字体的段落内容。</p>
</body>
</html>

这样，网页就会加载并使用 Google Fonts 提供的在线字体。

方法二：下载并本地托管Noto Sans CJK

如果你希望在本地项目中托管字体（例如，确保字体在没有网络连接时也能使用），可以下载字体文件并通过 @font-face 引入。

步骤 1：下载字体文件

前往 Google Noto Fonts GitHub，下载你需要的字体文件。根据需要选择语言版本：

NotoSansSC-Regular.otf（简体中文）

NotoSansTC-Regular.otf（繁体中文）

NotoSansJP-Regular.otf（日文）

将下载的字体文件保存在项目的 fonts 文件夹中，例如：

/project
  /fonts
    NotoSansSC-Regular.otf

步骤 2：使用 `@font-face` 在CSS中加载字体

在你的 CSS 文件中通过 @font-face 引入字体文件：

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/NotoSansSC-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

步骤 3：在HTML文件中应用字体

接下来，在 HTML 文件的样式中引用该字体：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地托管 Noto Sans CJK 字体</title>
  <style>
    @font-face {
      font-family: 'Noto Sans SC';
      src: url('fonts/NotoSansSC-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'Noto Sans SC', sans-serif;
    }
  </style>
</head>
<body>
  <h1>这是本地托管的 Noto Sans SC 字体标题</h1>
  <p>这是使用本地托管 Noto Sans SC 字体的段落内容。</p>
</body>
</html>

这种方法非常适合需要离线访问的项目，或者希望完全掌控字体加载的开发场景。