免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程

**声明**：本文转载并基于 [免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程（20240915更新） – 风记星辰](https://www.thyuu.com/62610/) 进行修改和完善。以下为正文内容：

---

在现代网页设计中，字体的选择对于用户体验和视觉效果至关重要。鉴于系统默认的微软雅黑字体在某些设计场景下略显陈旧，许多开发者和设计师倾向于引入更现代的无衬线字体，如苹果的苹方（PingFang SC）。这样做不仅能优化在 macOS 设备上的显示，也可能（在用户已安装相应字体的前提下）改善 Windows 系统上的视觉呈现。

本文将整理一系列免费可商用的黑体（无衬线）字体资源，并提供详尽的 CSS 字体引入教程。

## 1. 免费可商用字体列表及引用资源

### 1.1 字体提供方站点

以下是一些提供免费可商用字体或有相关计划的官方站点：

| 服务商         | 链接                                                                                                                                                         | 备注             |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| Google Fonts   | [https://fonts.google.com](https://fonts.google.com/)                                                                                                         | 国内访问可能需代理 |
| Adobe Fonts    | [https://fonts.adobe.com](https://fonts.adobe.com/)                                                                                                         | 通常需 Creative Cloud 订阅授权 |
| 阿里巴巴普惠体 | [https://fonts.alibabagroup.com](https://fonts.alibabagroup.com/)                                                                                               | 免费商用         |
| 钉钉进步体     | [https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3\_ZJwzulU0nceIl](https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl) | 免费商用         |
| 斗鱼追光体     | [https://www.douyu.com/topic/douyuZGT](https://www.douyu.com/topic/douyuZGT)                                                                                    | 免费商用         |
| 快看世界体     | [https://www.kuaikanmanhua.com/webs/fontPromotion](https://www.kuaikanmanhua.com/webs/fontPromotion)                                                            | 免费商用         |
| Mi Sans (小米) | [https://hyperos.mi.com/font/zh/](https://hyperos.mi.com/font/zh/)                                                                                              | 免费商用         |
| HarmonyOS Sans (华为) | [https://developer.huawei.com/consumer/cn/design/resource-V1](https://developer.huawei.com/consumer/cn/design/resource-V1)                                      | 免费商用         |
| OPPO Sans      | [https://open.oppomobile.com/new/developmentDoc/info?id=13223](https://open.oppomobile.com/new/developmentDoc/info?id=13223)                                    | 免费商用         |

### 1.2 网页 CDN 引入

部分字体提供了 CDN 链接，方便直接在网页中引入：

| 字体名称                                                                         | 服务商/托管方 | 字重范围 | CDN 链接 (CSS 或 WOFF2)                                                                             |
| ---------------------------------------------------------------------------------- | --------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| Noto Sans SC (思源黑体简体中文)                                                  | Google        | 可变     | `https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap`                   |
| Mi Sans                                                                          | 小米 (官方CDN) | 可变     | `https://cdn-font.hyperos.mi.com/font/css?family=MiSans:0:Chinese_Simplify,Latin&display=swap`      |
| Mi Sans VF (可变字体版本)                                                        | 小米 (官方CDN) | 可变     | `https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap` |
| HarmonyOS Sans                                                                   | Bilibili CDN  | 400 (Regular) | `https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css`                                      |
|                                                                                  | Bilibili CDN  | 500 (Medium)  | `https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css`                                       |
| OPPO Sans `¹`                                                                    | OPPO (官方CDN) | 400 (Regular) | `https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2`  |
|                                                                                  | OPPO (官方CDN) | 500 (Medium)  | `https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2`   |
| 华康金刚黑 (DFPKingGothicGB) `²`                                                 | 字节跳动 CDN   | 400 (Regular) | `https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap`             |
|                                                                                  | 字节跳动 CDN   | 500 (Medium)  | `https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap`              |

**注释：**

1. OPPO Sans 的官方 CDN WOFF2 文件似乎截取了约 5000 个常用字，可能导致生僻字无法显示。
2. 华康金刚黑体与苹方字体关系密切，商业使用**强烈建议确认授权情况**。虽然 CDN 链接可跨域使用，但务必谨慎，避免潜在的版权风险。

## 2. 如何在 CSS 中引入字体

获取字体链接后，根据链接类型（CSS 文件或字体文件如 WOFF2），引入方式有所不同。

### 2.1 引入 CSS 字体链接

如果获取的是一个 `.css` 文件的链接（如 Google Fonts, Mi Sans 的 CSS 链接等），有两种常见引入方式：

**方式一：在 HTML `<head>` 中使用 `<link>` 标签引入**

```html
<link rel='stylesheet' href='CSS字体链接地址'>
```

例如:

```html
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap'>
```

**方式二：在你的 CSS 文件中使用 `@import` 规则引入**

```css
@import url('CSS字体链接地址');
```

例如:

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
```

> **注意**：`@import` 规则建议放在 CSS 文件的最顶部。

### 2.2 引入 WOFF2 等字体文件链接

如果获取的是直接指向 `.woff2` (或其他字体格式如 `.ttf`, `.otf`) 文件的链接（如表格中 OPPO Sans 的 WOFF2 链接），需要在你的 CSS 文件中使用 `@font-face` 规则进行定义：

```css
@font-face {
  font-family: 'YourFontName'; /* 1. 定义字体族名称，后续在 CSS 中使用 */
  src: url('字体文件链接.woff2') format('woff2'); /* 2. 指定字体文件的路径和格式 */
  font-weight: 400; /* 3. 定义该字体文件对应的字重 */
  font-style: normal; /* 4. 定义字体样式，如 normal, italic */
  font-display: swap; /* 5. 定义字体加载策略，swap 表示先用后备字体显示，加载完再替换 */
}
```

例如，为 OPPO Sans Regular (400) 定义：

```css
@font-face {
  font-family: 'OPPOSans';
  src: url('https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```

**使用已定义的字体：**
完成 `@font-face` 定义或 CSS 链接引入后，就可以在需要应用该字体的元素上通过 `font-family` 属性来指定了。

```css
body {
  font-family: 'YourFontName', sans-serif; /* 'YourFontName' 必须与 @font-face 中定义的 font-family 一致 */
}

h1 {
  font-family: 'AnotherFontName', 'YourFontName', sans-serif; /* 可以设置备用字体 */
}
```

## 3. 字重（Font Weight）的理解与应用

浏览器默认文本字重通常是 `400` (normal)。如果希望标题等元素使用更粗的字重，可以利用 `font-weight` 属性。结合 `@font-face` 定义，有两种常见的处理不同字重字体文件的方式：

### 3.1 情况一：相同 `font-family` 名称，不同 `font-weight` 值

为同一字体族的不同字重文件定义相同的 `font-family` 名称，但在 `@font-face` 中指定各自对应的 `font-weight` 值。

```css
/* 定义 Regular 字重 */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 400; /* normal */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}

/* 定义 Medium 字重 */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 500; /* medium */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}
```

**使用时：** 通过 `font-weight` 属性来切换字重。

```css
body {
  font-family: 'OPPOSans', sans-serif;
  font-weight: 400; /* 默认使用 Regular 字重 */
}

h1 {
  /* h1 默认会被浏览器赋予较粗的字重，如 700 (bold) */
  /* 如果想精确使用 500 字重，则明确指定 */
  font-weight: 500; /* h1 元素使用 Medium 字重 */
}

.custom-bold-text {
  font-weight: 500; /* 应用 Medium 字重 */
}
```

这种方式更符合 `font-family` 和 `font-weight` 的语义，管理起来也更方便。

### 3.2 情况二：不同 `font-family` 名称

为不同字重的文件定义不同的 `font-family` 名称。

```css
/* 定义 Regular 字重 */
@font-face {
  font-family: 'OPPOSans-Regular';
  font-weight: 400; /* 声明此字体文件本身的字重 */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}

/* 定义 Medium 字重 */
@font-face {
  font-family: 'OPPOSans-Medium';
  font-weight: 500; /* 声明此字体文件本身的字重 */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}
```

**使用时：** 直接通过不同的 `font-family` 名称来选择字重。

```css
body {
  font-family: 'OPPOSans-Regular', sans-serif;
  /* font-weight: 400; 此时 font-weight 仍可用于指示，但主要靠 font-family 区分 */
}

h1 {
  font-family: 'OPPOSans-Medium', sans-serif;
  /* font-weight: 500; */
}
```

这种方式下，`font-weight` 属性仍然会影响浏览器的字体匹配逻辑，但主要通过切换 `font-family` 来使用不同粗细的字体。

**小结**：推荐使用**情况一**。它更符合 CSS 规范的意图，代码也更简洁易懂，便于管理和维护。确保 `@font-face` 中的 `font-weight` 与字体文件本身的字重相匹配。

## 4. `font-display: swap` 的作用

你可能注意到许多 `@font-face` 规则或字体 CDN 链接的 CSS 中都包含 `font-display: swap;`。
它的核心作用是**改善用户感知的加载性能**：在自定义字体文件尚未加载完成时，浏览器会立即使用后备字体（如系统默认字体）来渲染文本。一旦自定义字体加载完毕，文本会自动“交换”成新字体。

这样做可以有效避免因字体加载慢而导致的“文本空白闪烁”（FOIT, Flash of Invisible Text），确保用户能尽快看到内容。
若想深入了解字体加载策略及其影响，推荐阅读：[《知乎：一种减少字体加载影响的新方法：CSS 字体描述符(译)》](https://zhuanlan.zhihu.com/p/387559631)

## 5. `unicode-range` 优化：按需加载字符集

在一些官方提供的字体 CSS 文件中，你可能会看到 `unicode-range` 这个 `@font-face` 描述符。
它的作用是**定义该 `@font-face` 规则所应用的 Unicode 字符范围**。通过为同一字体族的不同字符集（如拉丁字母、常用汉字、生僻汉字、标点符号等）分别定义 `@font-face` 规则并指定不同的 `unicode-range`，浏览器可以仅下载页面实际使用到的字符所在的字体子集文件。

简单来说，就是将一个完整的字体文件分割成多个小块，按需加载。例如，如果一个页面只包含少量汉字，且这些汉字都属于某个预设的常用字集，那么浏览器就只需要加载包含这个常用字集的字体文件，而无需下载整个（可能非常大的）完整中文字体文件。这能显著减少不必要的流量消耗，并加快字体加载速度。

在本文列表的 CDN 链接中，使用此优化方式的字体有：

* Noto Sans SC (Google)
* Mi Sans (小米)
* HarmonyOS Sans (Bilibili CDN 托管的版本)
* 华康金刚黑 (字节跳动 CDN 托管的版本)

## 6. 关于字体文件格式 (WOFF2)

本文示例主要使用 WOFF2 (`.woff2`) 字体格式。WOFF2 提供了目前最佳的压缩率和性能，被现代浏览器广泛支持。
考虑到当前浏览器内核（尤其是 Chromium 系）的趋同性，对于个人站点或面向现代用户的项目，优先使用 WOFF2 通常是最佳选择，可以适当简化对旧版浏览器兼容性的考虑。
若需了解更多字体格式（如 TTF, OTF, WOFF, EOT 等）的差异和适用场景，推荐阅读：[《知乎：关于字体格式》](https://zhuanlan.zhihu.com/p/132274494)

## 7. 结语

关于 Windows 系统上的字体渲染清晰度，微软雅黑由于经过微软的特别优化（如 Hinting），在特定显示环境下确实有其优势。然而，随着显示器分辨率的不断提升（例如高 DPI 屏幕的普及），许多未经特别优化的现代无衬线字体，包括苹方等，在 Windows 上的显示效果也已相当出色。

选择合适的字体并正确引入，能够显著提升网站的专业感和用户阅读体验。希望本教程能帮助你更好地在项目中使用这些优秀的免费商用字体。

---

本文将整理一系列免费可商用的黑体（无衬线）字体资源，并提供详尽的 CSS 字体引入教程。

## 1. 免费可商用字体列表及引用资源

### 1.1 字体提供方站点

以下是一些提供免费可商用字体或有相关计划的官方站点：

### 1.2 网页 CDN 引入

部分字体提供了 CDN 链接，方便直接在网页中引入：

**注释：**

## 2. 如何在 CSS 中引入字体

获取字体链接后，根据链接类型（CSS 文件或字体文件如 WOFF2），引入方式有所不同。

### 2.1 引入 CSS 字体链接

如果获取的是一个 `.css` 文件的链接（如 Google Fonts, Mi Sans 的 CSS 链接等），有两种常见引入方式：

**方式一：在 HTML `<head>` 中使用 `<link>` 标签引入**

```html
<link rel='stylesheet' href='CSS字体链接地址'>
```

例如:

```html
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap'>
```

**方式二：在你的 CSS 文件中使用 `@import` 规则引入**

```css
@import url('CSS字体链接地址');
```

例如:

```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
```

> **注意**：`@import` 规则建议放在 CSS 文件的最顶部。

### 2.2 引入 WOFF2 等字体文件链接

例如，为 OPPO Sans Regular (400) 定义：

**使用已定义的字体：**
完成 `@font-face` 定义或 CSS 链接引入后，就可以在需要应用该字体的元素上通过 `font-family` 属性来指定了。

```css
body {
  font-family: 'YourFontName', sans-serif; /* 'YourFontName' 必须与 @font-face 中定义的 font-family 一致 */
}

h1 {
  font-family: 'AnotherFontName', 'YourFontName', sans-serif; /* 可以设置备用字体 */
}
```

## 3. 字重（Font Weight）的理解与应用

### 3.1 情况一：相同 `font-family` 名称，不同 `font-weight` 值

为同一字体族的不同字重文件定义相同的 `font-family` 名称，但在 `@font-face` 中指定各自对应的 `font-weight` 值。

```css
/* 定义 Regular 字重 */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 400; /* normal */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}

/* 定义 Medium 字重 */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 500; /* medium */
  font-display: swap;
  src: url(path/to/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}
```

**使用时：** 通过 `font-weight` 属性来切换字重。

```css
body {
  font-family: 'OPPOSans', sans-serif;
  font-weight: 400; /* 默认使用 Regular 字重 */
}

h1 {
  /* h1 默认会被浏览器赋予较粗的字重，如 700 (bold) */
  /* 如果想精确使用 500 字重，则明确指定 */
  font-weight: 500; /* h1 元素使用 Medium 字重 */
}

.custom-bold-text {
  font-weight: 500; /* 应用 Medium 字重 */
}
```

这种方式更符合 `font-family` 和 `font-weight` 的语义，管理起来也更方便。

### 3.2 情况二：不同 `font-family` 名称

为不同字重的文件定义不同的 `font-family` 名称。

**使用时：** 直接通过不同的 `font-family` 名称来选择字重。

```css
body {
  font-family: 'OPPOSans-Regular', sans-serif;
  /* font-weight: 400; 此时 font-weight 仍可用于指示，但主要靠 font-family 区分 */
}

h1 {
  font-family: 'OPPOSans-Medium', sans-serif;
  /* font-weight: 500; */
}
```

这种方式下，`font-weight` 属性仍然会影响浏览器的字体匹配逻辑，但主要通过切换 `font-family` 来使用不同粗细的字体。

## 4. `font-display: swap` 的作用

## 5. `unicode-range` 优化：按需加载字符集

在本文列表的 CDN 链接中，使用此优化方式的字体有：

* Noto Sans SC (Google)
* Mi Sans (小米)
* HarmonyOS Sans (Bilibili CDN 托管的版本)
* 华康金刚黑 (字节跳动 CDN 托管的版本)

## 6. 关于字体文件格式 (WOFF2)

## 7. 结语

选择合适的字体并正确引入，能够显著提升网站的专业感和用户阅读体验。希望本教程能帮助你更好地在项目中使用这些优秀的免费商用字体。

---

如果觉得我的文章对你有用，请随意赞赏

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

玩hign了(多图，流量党慎点)

照相说……

烟花与月亮

后知后觉，Flash更名为Animate了……

拍了点烟花……大过年的轻喷

我要上天、入地~

开学之后的事

今天生日，生日快乐～

一篇无聊的叙事

少年派的奇幻漂流……

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款