HTML5中使用Noto Sans CJK字體的詳細步驟

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

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

在HTML5中使用Noto Sans CJK字體的詳細指南

在網頁設計中，字體選擇對用戶體驗至關重要。Noto Sans CJK 是 Google 提供的一個優(yōu)秀的免費字體系列，支持中文簡體、繁體以及日文字符，具有簡潔現代的風格。本文將詳細介紹如何在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>標簽

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

<link  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  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>

這種方法非常適合需要離線訪問的項目，或者希望完全掌控字體加載的開發(fā)場景。