ページの先頭です。
このブラウザではスタイルを使用できないようです。ただし、情報は問題なく利用できます。
ここからサイト内共通メニューです。
ここから本文です。

フォント周りを整理した

みなさんは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

:sparkles: 絵文字 :sparkles: 周りは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は消した。

:sunny: :sunglasses: :sunglasses: :sunglasses: :sunny:

その他

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;
}

おわりに

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


  1. mplus-*の2つを合わせて3MBほどだった。 

  2. Emoji Symbols Fontは、Unicode6.0から更新がない。 

ここからシェアリンク一覧です。
ここからコメントフォームです。
ここからライセンス情報です。