在html5中使用noto sans cjk字体的详细指南
在网页设计中，字体选择对用户体验至关重要。noto sans cjk 是 google 提供的一个优秀的免费字体系列，支持中文简体、繁体以及日文字符，具有简洁现代的风格。本文将详细介绍如何在html5项目中使用 noto sans cjk 字体，包括在线加载和本地托管两种方式。
方法一：通过google fonts在线加载noto sans cjk
这种方法无需下载字体文件，直接通过 google fonts 提供的链接在线加载字体，非常方便。
步骤 1：访问google fonts并获取字体链接
- 打开 .
- 在搜索框中输入 “noto sans cjk”。
- 根据需要选择字体的语言版本：
- noto sans sc（简体中文）
- noto sans tc（繁体中文）
- noto sans jp（日文）
步骤 2：获取字体的标签
选择所需的字重（如常规、加粗），google fonts 会生成一个包含字体的 标签。例如，选择 noto sans sc，google fonts 生成如下链接：
步骤 3：在html文件中引入字体
将复制的 标签添加到 html 文件的 部分中。然后在 css 中使用 font-family 应用字体：
使用 noto sans cjk 字体 这是使用 noto sans sc 字体的段落内容。
这样，网页就会加载并使用 google fonts 提供的在线字体。
方法二：下载并本地托管noto sans cjk
如果你希望在本地项目中托管字体（例如，确保字体在没有网络连接时也能使用），可以下载字体文件并通过 @font-face 引入。
步骤 1：下载字体文件
前往 ，下载你需要的字体文件。根据需要选择语言版本：
- 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: format('opentype');
font-weight: normal;
font-style: normal;
}
步骤 3：在html文件中应用字体
接下来，在 html 文件的样式中引用该字体：
本地托管 noto sans cjk 字体 这是使用本地托管 noto sans sc 字体的段落内容。
这种方法非常适合需要离线访问的项目，或者希望完全掌控字体加载的开发场景。
总结
通过本文，你学到了两种使用 noto sans cjk 字体的方法：
- 在线加载：通过 google fonts 提供的链接加载字体，方便快捷。
- 本地托管：下载字体文件并在项目中使用
@font-face引入字体，适合离线或对字体加载有更高控制要求的项目。
这两种方式都可以根据项目的具体需求来选择使用，让你能够轻松地为网页项目添加优美的中文和日文字体。
refer:
