2022/12/31 更新

butterfly.zhheo.com 上看到下面这篇文章,介绍了很多其他字体(包括本文B站鸿蒙字体),写的很好

免费引入**黑体字体系列整理及 CSS 字体

1. 前言

Eurkon 那发现了B站使用的 harmonyOS_Regular 字体,B站网页端 打开开发者工具能看到字体由 regular.css 引入

计划用一段时间该字体,如有明显限速再停止使用

2. 引用步骤

  1. 自定义css 引入 regular.css 内容

  2. 自定义css 追加使用该字体的 css,以我的站点为示例(Butterfly 主题可跳过,直接步骤 3

    1
    2
    3
    4
    /* 字体样式 */
    body {
    font-family: HarmonyOS_Regular,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Lato,Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
    }
  3. Butterfly 主题内置了自定义字体的配置,参见 官方文档_自定义字体和字体大小

    示例:修改主题配置文件,如 [Blogroot]/_config.butterfly.yml

    1
    2
    3
    4
    5
    6
    7
    # Don't modify the following settings unless you know how they work (非必要不要修改)
    font:
    global-font-size:
    code-font-size:
    - font-family:
    + font-family: HarmonyOS_Regular,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Lato,Roboto,'PingFang SC','Microsoft YaHei',sans-serif
    code-font-family:

    个人建议:代码字体不建议使用 HarmonyOS_Regular,主题原生的 consolas 字体更好看

3. 后记

手机上唯二浏览器之一的 某浏览器 出现站内跳转时,页面长时间加载不出来的情况,考虑到 B站 对外站限速的可能性(排除法,大概率浏览器问题,同机的另一个浏览器不会复现🤔),备用方案:字体放 Github 个人仓库中,通过 staticaly CDN 进行免费加速使用

该字体已同步至 个人仓库

Fomalhaut🥝 获知 staticaly CDN 的使用,引用内容如下

原文地址:https://www.fomal.cc/

官网地址:https://www.staticaly.com
轻松地从GitHub / GitLab / Bitbucket等加载您的项目 没有流量限制或限制。

文件通过超快速全球CDN提供。 在URL(不是分支)中使用特定标记或提交哈希。
根据URL永久缓存文件。 除master分支外,文件在浏览器中缓存1年。 具体用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# GitHub CDN
https://cdn.staticaly.com/gh/:user/:repo/:tag/:file
https://cdn.staticaly.com/gh/growvv/growvv.github.io/master/README.md

# GitLab CDN
https://cdn.staticaly.com/gl/:user/:repo/:tag/:file

# Bitbucket CDN
https://cdn.staticaly.com/bb/:user/:repo/:tag/:file

# WordPress CDN
https://cdn.staticaly.com/wp/c/:version/wp-includes/:file
https://cdn.staticaly.com/wp/p/:plugin_name/:version/:file
https://cdn.staticaly.com/wp/t/:theme_name/:version/:file

# Imgpx CDN
https://cdn.staticaly.com/img/:image_url

# Favicons CDN
https://cdn.staticaly.com/favicons/:favicon_url

总结:staticaly CDN 作为免费 CDN,速度勉强还行

4. 字体样式总结

相较于 Butterfly 主题原字体,harmonyOS_Regular 字体左右间距略变大,字母略变明显,汉字略细密

总结:感知不强,徒增功耗 😂

主题原字体(Segoe UI)

harmonyOS_Regular 字体