フォント周りを整理した

(2022-06-14) もうこのサイトではWebフォントを使用していません。また、絵文字についてもTwemojiから取得した画像を直接読み込むよう変更されています。

みなさんはWebフォントを知っているだろうか。

Webフォントというのは便利なものである。ひとたび@font-faceと適切なURLを記すと、毎年のように書き換えていたfomt-family: "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", ...といった祝詞に悩まされる必要がなくなるという。

このサイトでも、祝詞の呪いから逃げるようにして、/fonts/以下に配置されているmplus-1m-regular.ttf（等幅）、mplus-1p-regular.ttf（プロポーショナル）、EmojiSymbols-Regular.woff（絵文字）をロードしていた。しかし、このやり方は以下の点であまり良くない。

• サブセット化していないため、サイズが大きい¹。
• 絵文字フォントが古い²。
• レポジトリにフォントファイルを突っ込んでおくのはあまり気持ちがよくない。

というわけで、フォント周りの整理をした。

emoji

絵文字 周りはMarkdownの拡張であるmdx_unimojiに任せていたため、ここに乗っかることにした。

:emoji:→絵文字変換の先行事例として、IME でも:muscle:みたいに Emoji を入力したい！ - pockestrapという記事がある。これを参考に、emoji_strategy.jsonからmdx_unimojiに渡せる形式の辞書になるようなjsonファイルを生成するPythonスクリプト emoji_generator.py を書いた。

生成したjsonファイルをjson.loadして、mdx_unimojiのemojiパラメータに渡すと、:the_newest_emoji:を最新の絵文字に変換して出力してくれる。これをtwemojiなどでparseしてやれば、綺麗な絵文字が労せず表示できるというわけ。JavaScriptが無効だったらまぁ残念でした。

EmojiSymbols-Regularは消した。

その他

M+の質感を失いたくなかったので、こちらは公式のWebフォントに乗っかってレポジトリのフォントファイルは消した。M+ Webフォントは和文欧文合わせても500KBちょっとで済む。

祝詞は以下の通り。たぶんしばらく変えない。

body {
    font-family: "M+ web 1p regular", "M+ web regular", "M+ 1p regular", "MigMix 1P", sans-serif;
}
code, pre {
    font-family: "M+ web 1m regular", "M+ web regular", "M+ 1m regular", "MigMix 1M", monospace;
}

おわりに

フォントをレポジトリから全部消せてよかった。