HTML5中使用Noto Sans CJK字體的詳細(xì)步驟

發(fā)布時(shí)間：2024-09-23 15:42:28 作者：engchina

在HTML5項(xiàng)目中使用NotoSansCJK字體能提升用戶體驗(yàn),本文介紹了通過(guò)GoogleFonts在線加載和本地托管兩種方法,在線加載無(wú)需下載,通過(guò)GoogleFonts鏈接快速引入，適合離線使用或需控制字體加載的場(chǎng)景,兩種方法都可根據(jù)需求選擇,方便地為網(wǎng)頁(yè)添加中文和日文字體

在HTML5中使用Noto Sans CJK字體的詳細(xì)指南

在網(wǎng)頁(yè)設(shè)計(jì)中，字體選擇對(duì)用戶體驗(yàn)至關(guān)重要。Noto Sans CJK 是 Google 提供的一個(gè)優(yōu)秀的免費(fèi)字體系列，支持中文簡(jiǎn)體、繁體以及日文字符，具有簡(jiǎn)潔現(xiàn)代的風(fēng)格。本文將詳細(xì)介紹如何在HTML5項(xiàng)目中使用 Noto Sans CJK 字體，包括在線加載和本地托管兩種方式。

方法一：通過(guò)Google Fonts在線加載Noto Sans CJK

這種方法無(wú)需下載字體文件，直接通過(guò) Google Fonts 提供的鏈接在線加載字體，非常方便。

步驟 1：訪問(wèn)Google Fonts并獲取字體鏈接

打開(kāi) Google Fonts.
在搜索框中輸入 “Noto Sans CJK”。
根據(jù)需要選擇字體的語(yǔ)言版本：
- Noto Sans SC（簡(jiǎn)體中文）
- Noto Sans TC（繁體中文）
- Noto Sans JP（日文）

步驟 2：獲取字體的<link>標(biāo)簽

選擇所需的字重（如常規(guī)、加粗），Google Fonts 會(huì)生成一個(gè)包含字體的 <link> 標(biāo)簽。例如，選擇 Noto Sans SC，Google Fonts 生成如下鏈接：

<link  rel="stylesheet">

步驟 3：在HTML文件中引入字體

將復(fù)制的 <link> 標(biāo)簽添加到 HTML 文件的 <head> 部分中。然后在 CSS 中使用 font-family 應(yīng)用字體：

<!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  rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans SC', sans-serif;
    }
  </style>
</head>
<body>
  <h1>這是 Noto Sans SC 字體的標(biāo)題</h1>
  <p>這是使用 Noto Sans SC 字體的段落內(nèi)容。</p>
</body>
</html>

這樣，網(wǎng)頁(yè)就會(huì)加載并使用 Google Fonts 提供的在線字體。

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

如果你希望在本地項(xiàng)目中托管字體（例如，確保字體在沒(méi)有網(wǎng)絡(luò)連接時(shí)也能使用），可以下載字體文件并通過(guò) @font-face 引入。

步驟 1：下載字體文件

前往 Google Noto Fonts GitHub，下載你需要的字體文件。根據(jù)需要選擇語(yǔ)言版本：

NotoSansSC-Regular.otf（簡(jiǎn)體中文）
NotoSansTC-Regular.otf（繁體中文）
NotoSansJP-Regular.otf（日文）

將下載的字體文件保存在項(xiàng)目的 fonts 文件夾中，例如：

/project
  /fonts
    NotoSansSC-Regular.otf

步驟 2：使用 @font-face 在CSS中加載字體

在你的 CSS 文件中通過(guò) @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文件中應(yīng)用字體

接下來(lái)，在 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 字體標(biāo)題</h1>
  <p>這是使用本地托管 Noto Sans SC 字體的段落內(nèi)容。</p>
</body>
</html>

這種方法非常適合需要離線訪問(wèn)的項(xiàng)目，或者希望完全掌控字體加載的開(kāi)發(fā)場(chǎng)景。