08_Hexo-博客引用 B站鸿蒙字体

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