让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress

白鱼小栈

白榆 · 2026-02-11 · via 白鱼小栈

本文最后更新于 2026-03-01 。

小米 MiSans 字体｜官网 ↗

前言

今日想给博客换个全局字体，偶然发现 MiSans Webfont 这个非常不错的项目：

项目地址｜GitHub ↗

MiSans Webfont 是一个基于小米官方 MiSans 字体制作的 Web 字体分包项目。该项目将每个字重拆分为近 200 个分片（woff2），每个分片只包含部分 Unicode 字符，方便字体在网页中加载。

项目利用了中文网字计划开发的字体分包工具对原字体分包，网页加载时，用户只需获取所使用的文字所在的分包，大幅降低所需加载的大小，提升网页加载速度。

MiSans 是由小米主导，联合蒙纳字库、汉仪字库共同打造的全球语言字体定制项目。这是一个庞大的字体家族，涵盖 20 多种书写系统，支持 600 多种语言，字符数量超过 10 万个。作为 Xiaomi HyperOS 系统默认字体，其以简约/清晰，人文/易读，统一的视觉风格为基本原则出发，构建多语言信息体验一致性，旨在帮助为 Xiaomi HyperOS 提供互联的通用体验。

进一步了解 Misans 及许可协议 ↗

1. 基本使用方法 —— 快速使用

直接将下面提供的代码以 <link> 的形式添加到网页的 <head> 内即可：

获取更快的响应速度：

Bootcdn：https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans-style.css（国内加载速度相对较快）

Webcache：https://npm.webcache.cn/misans-webfont/misans-style.css

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans-webfont/misans-style.css" />
  <style>
    body {
      font-family: "MiSans Bold";
      font-weight: bold;
    }
  </style>
</head>

你也可以只引用单一的字体，修改上文 href 链接为：

具体可以引用的字体请查看：fonts 分支，找到具体字体中的 result.css 并修改上文链接。

https://cdn.jsdelivr.net/npm/misans-webfont/misans/misans-bold/result.min.css

如果你有自己的 CDN，也可以将字体文件自托管，获得更稳定可控的加载体验，详见本文第 4 节。

2. 示例配置（适用 WordPress / 子比主题）

MiSans Webfont 的每个字重都对应独立的 font-family 名称，可按需在 CSS 中进行配置。

/* 正文 */
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
/* 标题 */
h1, h2, h3, h4 { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 强调文本 */
strong, b { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 按钮 */
button, .button { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
.wp-posts-content li { margin-bottom: 6px; }
/* 文章标题 */
h2.item-heading.text-ellipsis { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif !important; font-weight: normal !important; }
/* 下一页按钮 */
.next-page.ajax-next.lazyloaded { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }

3. 进阶用法

3.1 苹果设备优先用系统字体

苹果设备自带的 PingFang SC（苹方）字体在中文显示效果已经非常不错。

因此笔者建议：可以检测用户是否是苹果设备，如果是则优先调用系统的苹方字体。

将其放在 font-family 的最前面即可：

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif;

检测功能的实现：

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
if (!isAppleDevice) {
    // 只加载实际使用的3个字重
    const weights = ['regular', 'demibold'];
    const baseUrl = 'https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans/misans-';

    weights.forEach(weight => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `${baseUrl}${weight}/result.css`;
        document.head.appendChild(link);
    });
}
</script>

这样，Mac/iPhone/iPad 用户会优先用系统字体，只有非苹果设备才加载 MiSans。

3.2 按需加载字体资源，提升速度

MiSans Webfont 的主 CSS 会导入全部 10 个字重，每个字重包含近 200 个分片。

实际页面只需用到少数几个字重时，可以只加载对应的 CSS 文件（修改第 4 行）：

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
if (!isAppleDevice) {
    const weights = ['regular', 'demibold', 'semibold'];
    const baseUrl = 'https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans/misans-';
    weights.forEach(weight => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `${baseUrl}${weight}/result.css`;
        document.head.appendChild(link);
    });
}
</script>

还可以在 <head> 添加 DNS 预连接，提高加载速度：

<link rel="dns-prefetch" href="https://cdn.bootcdn.net">
<link rel="preconnect" href="https://cdn.bootcdn.net" crossorigin>

4. 自托管字体文件

如果你已有自己的 CDN，将字体文件自托管是更可靠的选择，同时也能获得更稳定、更快速的加载体验。

使用第三方 CDN 存在一定风险。以 bootcdn 为例，其曾与 polyfill.io 供应链攻击事件关联，被用于向用户注入恶意脚本。

4.1 下载字体文件

通过 npm 拉取完整字体包：

这条命令可以直接在你的 Windows 电脑上执行，前提是已安装 npm

npm install misans-webfont

安装完成后，在 node_modules/misans-webfont/misans/ 下找到所需字重的目录：

misans/
├── misans-light/
│   ├── result.css      ← 主 CSS，声明所有分片的 @font-face
│   ├── [0].woff2
│   ├── [1].woff2
│   └── ...（约 80～100 个分片）
├── misans-regular/
├── misans-medium/
├── misans-demibold/
└── misans-bold/

上传到 CDN/对象存储

将需要的字重目录完整上传到你的 CDN，保持目录结构不变。result.css 内部使用相对路径引用分片，只要目录结构不变，无需修改任何 CSS 内容。

4.2 配置 CDN 响应头

在你的 CDN 或服务器上为字体文件添加以下响应头：

Cache-Control: public, max-age=31536000, immutable
Access-Control-Allow-Origin: *

Cache-Control 让浏览器将字体缓存一整年，二次访问直接走本地缓存。Access-Control-Allow-Origin 是字体跨域加载的必要条件，缺少此头浏览器会拒绝加载。

4.3 替换加载脚本

将字体加载脚本的 baseUrl 改为你自己的 CDN 地址。

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
  (navigator.maxTouchPoints > 1 && /Mac/i.test(navigator.userAgent));
function isMIUI() {
  const ua = navigator.userAgent;
  if (/MiuiBrowser|XiaoMi/i.test(ua)) return true;
  if (/2\d{4}[A-Z]{2,4}/.test(ua)) return true;
  if (/\bMI\b|Redmi|POCO/i.test(ua)) return true;
  return false;
}
if (!isAppleDevice && !isMIUI()) {
  const weights = ['regular', 'demibold'];
  const baseUrl = 'https://cdn.baiyuyu.<记得替换>/misans/misans-';
  weights.forEach(weight => {
    const preload = document.createElement('link');
    preload.rel = 'preload';
    preload.as = 'style';
    preload.href = `${baseUrl}${weight}/result.css`;
    preload.onload = function () { this.rel = 'stylesheet'; };
    document.head.appendChild(preload);
  });
}
</script>

4.4 附博主使用的全套配置

仅供参考，CSS 以及 JS 代码：

/* 正文 */
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
/* 标题 */
h1, h2, h3, h4 { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 强调文本 */
strong, b { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 按钮 */
button, .button { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
.wp-posts-content li { margin-bottom: 6px; }
/* 文章标题 */
h2.item-heading.text-ellipsis { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif !important; font-weight: normal !important; }
/* 下一页按钮 */
.next-page.ajax-next.lazyloaded { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
  (navigator.maxTouchPoints > 1 && /Mac/i.test(navigator.userAgent));
function isMIUI() {
  const ua = navigator.userAgent;
  if (/MiuiBrowser|XiaoMi/i.test(ua)) return true;
  if (/2\d{4}[A-Z]{2,4}/.test(ua)) return true;
  if (/\bMI\b|Redmi|POCO/i.test(ua)) return true;
  return false;
}
if (!isAppleDevice && !isMIUI()) {
  const weights = ['regular', 'demibold'];
  const baseUrl = 'https://cdn.baiyuyu.com/misans/misans-';
  weights.forEach(weight => {
    const preload = document.createElement('link');
    preload.rel = 'preload';
    preload.as = 'style';
    preload.href = `${baseUrl}${weight}/result.css`;
    preload.onload = function () { this.rel = 'stylesheet'; };
    document.head.appendChild(preload);
  });
}
</script>

全文完

全文完，欢迎体验尝试~

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

白鱼小栈

前言

1. 基本使用方法 —— 快速使用

2. 示例配置（适用 WordPress / 子比主题）

3. 进阶用法

3.1 苹果设备优先用系统字体

3.2 按需加载字体资源，提升速度

4. 自托管字体文件

4.1 下载字体文件

4.2 配置 CDN 响应头

4.3 替换加载脚本

4.4 附博主使用的全套配置

全文完