免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程
声明：本文转载并基于 免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程（20240915更新） – 风记星辰 进行修改和完善。以下为正文内容：
在现代网页设计中，字体的选择对于用户体验和视觉效果至关重要。鉴于系统默认的微软雅黑字体在某些设计场景下略显陈旧，许多开发者和设计师倾向于引入更现代的无衬线字体，如苹果的苹方（PingFang SC）。这样做不仅能优化在 macOS 设备上的显示，也可能（在用户已安装相应字体的前提下）改善 Windows 系统上的视觉呈现。
本文将整理一系列免费可商用的黑体（无衬线）字体资源，并提供详尽的 CSS 字体引入教程。
1. 免费可商用字体列表及引用资源
1.1 字体提供方站点
以下是一些提供免费可商用字体或有相关计划的官方站点：
| 服务商 | 链接 | 备注 |
|---|---|---|
| Google Fonts | https://fonts.google.com | 国内访问可能需代理 |
| Adobe Fonts | https://fonts.adobe.com | 通常需 Creative Cloud 订阅授权 |
| 阿里巴巴普惠体 | https://fonts.alibabagroup.com | 免费商用 |
| 钉钉进步体 | https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl | 免费商用 |
| 斗鱼追光体 | https://www.douyu.com/topic/douyuZGT | 免费商用 |
| 快看世界体 | https://www.kuaikanmanhua.com/webs/fontPromotion | 免费商用 |
| Mi Sans (小米) | https://hyperos.mi.com/font/zh/ | 免费商用 |
| HarmonyOS Sans (华为) | https://developer.huawei.com/consumer/cn/design/resource-V1 | 免费商用 |
| OPPO Sans | https://open.oppomobile.com/new/developmentDoc/info?id=13223 | 免费商用 |
1.2 网页 CDN 引入
部分字体提供了 CDN 链接，方便直接在网页中引入：
| 字体名称 | 服务商/托管方 | 字重范围 | CDN 链接 (CSS 或 WOFF2) |
|---|---|---|---|
| Noto Sans SC (思源黑体简体中文) | 可变 | 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 |
注释：
- OPPO Sans 的官方 CDN WOFF2 文件似乎截取了约 5000 个常用字，可能导致生僻字无法显示。
- 华康金刚黑体与苹方字体关系密切，商业使用强烈建议确认授权情况。虽然 CDN 链接可跨域使用，但务必谨慎，避免潜在的版权风险。
2. 如何在 CSS 中引入字体
获取字体链接后，根据链接类型（CSS 文件或字体文件如 WOFF2），引入方式有所不同。
2.1 引入 CSS 字体链接
如果获取的是一个 .css 文件的链接（如 Google Fonts, Mi Sans 的 CSS 链接等），有两种常见引入方式：
方式一：在 HTML <head> 中使用 <link> 标签引入
<link rel='stylesheet' href='CSS字体链接地址'>例如:
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap'>方式二：在你的 CSS 文件中使用 @import 规则引入
@import url('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 规则进行定义：
@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) 定义：
@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 属性来指定了。
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 值。
/* 定义 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 属性来切换字重。
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 名称。
/* 定义 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 名称来选择字重。
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 字体描述符(译)》
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 等）的差异和适用场景，推荐阅读：《知乎：关于字体格式》
7. 结语
关于 Windows 系统上的字体渲染清晰度，微软雅黑由于经过微软的特别优化（如 Hinting），在特定显示环境下确实有其优势。然而，随着显示器分辨率的不断提升（例如高 DPI 屏幕的普及），许多未经特别优化的现代无衬线字体，包括苹方等，在 Windows 上的显示效果也已相当出色。
选择合适的字体并正确引入，能够显著提升网站的专业感和用户阅读体验。希望本教程能帮助你更好地在项目中使用这些优秀的免费商用字体。
空空如也！