本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

HTML5中使用Noto Sans CJK字体的步骤

html5 来源：互联网 作者：佚名 发布时间：2024-09-23 21:44:36 人浏览
摘要

在HTML5中使用Noto Sans CJK字体的详细指南 在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK是 Google 提供的一个优秀的免费字体系列，支持中文简体、繁体以及日文字符，具有简洁现代的

在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 生成如下链接：

1

<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 应用字体：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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 文件夹中，例如：

1

2

3

/project

  /fonts

    NotoSansSC-Regular.otf

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

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

1

2

3

4

5

6

@font-face {

  font-family: 'Noto Sans SC';

  src: url('fonts/NotoSansSC-Regular.otf') format('opentype');

  font-weight: normal;

  font-style: normal;

}

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!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/

https://fonts.google.com/specimen/Roboto
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • HTML5中Checkbox标签介绍
    在HTML5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本文将深入解析Checkbox标签的基本属性、样式自
  • HTML5中使用Noto Sans CJK字体的步骤
    在HTML5中使用Noto Sans CJK字体的详细指南 在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK是 Google 提供的一个优秀的免费字体系列，

  • HTML5表单的自动验证、取消验证、自定义错误信息

    HTML5表单的自动验证、取消验证、自定义错误信息
    1、自动验证 通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属

  • Html5播放hls格式的视频代码

    Html5播放hls格式的视频代码
    一、什么情况下需要播放 当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这

  • HTML5使用＜blockquote＞标签实现段落缩进效果

    HTML5使用＜blockquote＞标签实现段落缩进效果
    使用blockquote标签可以实现页面文字的段落缩进。这一标签也是每使用一次，段落就缩进一次，并且可以嵌套使用，以达到不同的缩进效果。

  • HTML5 Canvas实现在线签字功能的介绍

    HTML5 Canvas实现在线签字功能的介绍
    在现代互联网应用中，有时我们需要让用户在网页上进行签字操作，比如确认文件、填写电子表格或者签署合同。利用 HTML5 的 canvas 画布，
  • window.open()各参数示例介绍
    基本语法： 1 window.open(http://****/); window.open()各参数详解： 1 window.open(http://***/, newwindow, height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scro

  • uniapp在h5页面实现扫码功能(html5-qrcode)

    uniapp在h5页面实现扫码功能(html5-qrcode)
    安装 1 npm install html5-qrcode 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

  • 关于document.body.clientHeight返回值为0的完美解决方

    关于document.body.clientHeight返回值为0的完美解决方
    关于body.clientHeight 这里引用一下@kelly0721的博客中的图片，为各位展示一下我们可以获取的各种屏幕元素尺寸。 此处我们希望获得的document
  • html5 video标签controlslist详细使用
    HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性。video controlslist 属性可以用于告诉浏览器在视频播放过程中
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计