Noto Sans CJK SC Webfont

这是一个为 Noto Sans CJK SC（思源黑体简体中文）设计的 webfont npm 包，提供了 7 种字重，并经过了精细的子集化处理，以实现最佳的网页加载性能。

特性

• 极致性能: 字体文件被分割成数千个小的 .woff2 文件。通过 @font-face 的 unicode-range 特性，浏览器只会按需下载当前页面渲染所必需的字符，极大地减少了初始加载体积。
• 7 种完整字重: 提供了从 Thin (100) 到 Black (900) 的全部 7 种字重。
• 模块化 CSS: 您可以根据需要，只引入特定字重的 CSS 文件，最大限度地控制资源加载。
• 清晰的命名: 所有字体文件和 CSS 文件都采用了直观的命名方式，易于理解和维护。
• 最佳实践: 遵循现代 npm 包的最佳实践，包括使用 exports 字段和提供 .npmignore 文件。

如何使用

安装

npm install noto-sans-cjk-sc

导入方式

我们提供多种导入方式，以满足不同场景的需求。

1. 默认导入 (推荐)

默认导入只会加载最常用的 regular (400) 字重，这是性能最佳的选择。

在您的项目入口文件 (如 main.js 或 App.vue):

import 'noto-sans-cjk-sc';

或者在您的主 CSS 文件中:

@import 'noto-sans-cjk-sc';

2. 按需导入特定字重

如果您的项目只需要几种特定的字重，这是生产环境的最佳实践。

在您的 CSS 文件中:

/* 只引入 regular 和 bold 两种字重 */
@import 'noto-sans-cjk-sc/regular.css';
@import 'noto-sans-cjk-sc/bold.css';

可用的字重文件包括:

• thin.css (font-weight: 100)
• light.css (font-weight: 300)
• demilight.css (font-weight: 350)
• regular.css (font-weight: 400)
• medium.css (font-weight: 500)
• bold.css (font-weight: 700)
• black.css (font-weight: 900)

3. 完整导入所有字重

如果您希望一次性引入所有 7 种字重，可以导入 all.css。

在您的 CSS 文件中:

@import 'noto-sans-cjk-sc/all.css';

在 CSS 中使用

无论您选择哪种导入方式，都可以通过 font-family 和 font-weight 来应用字体。

body {
  font-family: 'Noto Sans CJK SC', sans-serif;
}

.title {
  font-weight: 700; /* 使用 Bold 字重 */
}

.description {
  font-weight: 300; /* 使用 Light 字重 */
}

许可

字体文件本身遵循 OFL-1.1 (Open Font License)。 本包的构建脚本和配置文件使用 MIT 许可。