小米 MiSans 字体｜官网 ↗

前言

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

项目地址｜GitHub ↗

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

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

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

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

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

本部分的内容来自项目作者，查看项目仓库

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

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

获取更快的响应速度：

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

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

<a href="https://cdn.jsdelivr.net/npm/misans-webfont/misans/misans-bold/result.min.css">https://cdn.jsdelivr.net/npm/misans-webfont/misans/misans-bold/result.min.css</a>

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

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

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

body {

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

}

h1, h2 {

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

    font-weight: 700; /* Bold字重，实际可用 */

}

h3 {

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

}

h4 {

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

}

strong, b {

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

    font-weight: 700;

}

button, .button {

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

}

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。

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

MiSans Webfont 的主 CSS 会导入全部10个字重，每个字重又包含近 200 个分片。实际页面只需用到少数几个字重时，可以只加载对应的 CSS 文件：

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

MiSans Webfont 的 CSS 已默认使用 font-display: swap，无需额外设置。

附：博主使用的全套配置

仅供参考。


/* 正文使用常规字重 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif;
}

/* 一级标题 */
h1 {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif;
}

/* 二级标题 */
h2 {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif;
}

/* 三级标题 */
h3 {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif;
}

/* 四级标题 */
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/.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>