HTML5中使用Noto Sans CJK字体的详细步骤
我要评论在HTML5中使用Noto Sans CJK字体的详细指南
在网页设计中，字体选择对用户体验至关重要。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>这种方法非常适合需要离线访问的项目，或者希望完全掌控字体加载的开发场景。
总结
通过本文，你学到了两种使用 Noto Sans CJK 字体的方法：
- 在线加载：通过 Google Fonts 提供的链接加载字体，方便快捷。
- 本地托管：下载字体文件并在项目中使用
@font-face引入字体，适合离线或对字体加载有更高控制要求的项目。
这两种方式都可以根据项目的具体需求来选择使用，让你能够轻松地为网页项目添加优美的中文和日文字体。
refer:
https://github.com/notofonts/noto-cjk
https://fonts.google.com/specimen/Roboto
到此这篇关于在HTML5中使用Noto Sans CJK字体的详细指南的文章就介绍到这了,更多相关HTML5 Noto Sans CJK字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21- 这篇文章主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSS Grid布局的基础知识和如何实现自动换行的网格布局，感兴趣的朋友一起看看吧2025-04-21
本文介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的2025-03-11- HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用,文章还介绍了高级用法,如存储JSON数据、事2025-03-11
- 在HTML5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨<select>标签的属性、样式，并重点介2025-02-27
本文介绍了HTML5InputDatePicker对象表示HTML``元素,是HTML5中的新对象,介绍了日期、周、月份、时间、日期+时间、本地日期时间等不同类型的日期选择器，感兴趣的朋友一起看2025-02-17
本文介绍了HTML5中的超链接、相对路径和图片的使用方法,超链接可以创建指向另一个文档或页面内部书签的链接,相对路径用于在同一服务器内部跳转页面,图片标签用于引入外部图2025-02-17- 本文介绍了HTML5超链接的创建方法,包括基本语法、创建图像超链接的边框去除方法以及锚点链接的使用,还讨论了超链接的四种不同状态（link、visited、hover、active）的CSS样2025-02-17
最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，2024-11-03
最新评论