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 テーマには、カスタムフォントの設定が組み込まれています。公式ドキュメント_自定义字体和字体大小を参照してください。

例：テーマの設定ファイルを変更します。[ブログのルート]/_config.butterfly.yml
```
# 以下の設定は、動作がわかっている場合以外は変更しないでください（非必要不要修改）
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 に基づいてファイルを永久にキャッシュします。ブラウザキャッシュは 1 年間有効ですが、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 フォント