首页 前端知识 在HTML5中使用Noto Sans CJK字体的详细指南

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

2024-09-09 00:09:49 前端知识 前端哥 86 719 我要收藏

在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并获取字体链接

  1. 打开 Google Fonts.
  2. 在搜索框中输入 “Noto Sans CJK”。
  3. 根据需要选择字体的语言版本:
    • 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>

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


总结

通过本文,你学到了两种使用 Noto Sans CJK 字体的方法:

  1. 在线加载:通过 Google Fonts 提供的链接加载字体,方便快捷。
  2. 本地托管:下载字体文件并在项目中使用 @font-face 引入字体,适合离线或对字体加载有更高控制要求的项目。

这两种方式都可以根据项目的具体需求来选择使用,让你能够轻松地为网页项目添加优美的中文和日文字体。

refer:

  • https://github.com/notofonts/noto-cjk
  • https://fonts.google.com/
  • https://fonts.google.com/specimen/Roboto
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18022.html
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!