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

2022/12/31 更新#

在 butterfly.zhheo.com 上看到下面這篇文章，介紹了很多其他字體（包括本文 B 站鴻蒙字體），寫得很好

免費引入 ** 黑體字體系列整理及 CSS 字體

1. 前言#

在 Eurkon 那發現了 B 站使用的 harmonyOS_Regular 字體，B 站網頁端打開開發者工具能看到字體由 regular.css 引入

計劃用一段時間該字體，如有明顯限速再停止使用

2. 引用步驟#

自定義 css 引入 regular.css 內容

自定義 css 追加使用該字體的 css，以我的站點為示例（Butterfly 主題可跳過，直接步驟 3）

/* 字體樣式 */
body {
    font-family: HarmonyOS_Regular,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Lato,Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
}

Butterfly 主題內置了自定義字體的配置，參見官方文檔_自定義字體和字體大小

示例：修改主題配置文件，如 [Blogroot]/_config.butterfly.yml

# 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 年。具體用法：

# 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 字體