08_Hexo-Blog Reference Bilibili Hongmeng Font

Updated on December 31, 2022#

I found this article on butterfly.zhheo.com, which introduces many other fonts (including Bilibili HarmonyOS font) and is well-written.

Free Introduction to **Sans-serif Font Series and CSS Fonts

1. Introduction#

I discovered the harmonyOS_Regular font used by Bilibili on Eurkon. By opening the developer tools on the Bilibili website, you can see that the font is imported through regular.css.

I plan to use this font for a period of time, and stop using it if there are any noticeable limitations.

2. Steps to Use#

Customize CSS and import the content of regular.css.

Customize CSS and add the CSS that uses this font. Take my website as an example (Skip this step if using the Butterfly theme).

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

The Butterfly theme has built-in configuration for custom fonts. Refer to the official documentation on custom fonts and font sizes.

Example: Modify the theme configuration file, such as [Blogroot]/_config.butterfly.yml
```
# Don't modify the following settings unless you know how they work (Do not modify unless necessary)
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:
```
Personal suggestion: It is not recommended to use HarmonyOS_Regular for code fonts. The native consolas font in the theme looks better.

3. Afterword#

One of the two browsers on my phone, a certain browser, sometimes fails to load the page for a long time when there is an internal jump on the website. Considering the possibility of Bilibili limiting access to external websites (by process of elimination, it is likely a browser issue as the other browser on the same device does not have this issue 🤔), the backup plan is to host the font on my personal GitHub repository and use staticaly CDN for free acceleration.

This font has been synchronized to my personal repository.

I learned about the use of staticaly CDN from Fomalhaut🥝 and the quoted content is as follows:

Original article: https://www.fomal.cc/

Official website: https://www.staticaly.com
Load your projects from GitHub / GitLab / Bitbucket, etc. without traffic restrictions or limitations.

Files are delivered through a super-fast global CDN. Use specific tags or commit hashes in the URL (not branches).
Files are permanently cached based on the URL. Except for the master branch, files are cached in the browser for 1 year. Specific usage:

# 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

Summary: As a free CDN, staticaly CDN's speed is passable.

4. Font Style Summary#

Compared to the original font of the Butterfly theme, the harmonyOS_Regular font has slightly larger spacing between characters, slightly more distinct letters, and slightly thinner Chinese characters.

Summary: Not very noticeable, just adds to power consumption 😂

Original theme font (Segoe UI)

harmonyOS_Regular font