ひつじぶどう

Twitterに書くには長く, Qiitaに書くような技術的ではないお話をここに( ˘ω˘)

ブログのコードブロックのCSSを更新しました

はじめに

どうも‪✋(´・ᴗ・` )‬
ブログのコードブロックのCSSを更新しました。

なんで?

フォントの優先順位が気に食わなかったんですね。

テーマのデフォルト

テーマのデフォルトはこんな感じ。

pre.code {
    font-family: Monaco,Consolas,Courier New,Courier,monospace,sans-serif
}

わざわざこんな記事を読んでいる方はご存知かもですが, CSSではfont-familyに書かれたフォントは先頭から順に適用されていきます。
MonacoがないならConsolas, ConsolasがないならCourier New...といった具合です。

というわけでここの順番を私好みの順番にして, できるだけ私が気持ち良いと感じるフォントで表示されるようにしたいわけです。私のブログなのでね。

以下, 各フォントのワタクシ目線の説明です。

Monaco

これはmacOSにプリインストールされています。
ちょっと柔らかい感じで好きです。

Monaco

Consolas

これはWindowsに最初から入っているフォントです。
フォント自体は良いのですが, 私のお気持ちとしてはmacOSにプリインストールされているフォントから順に書きたいのでこれはやや後ろに配置したいです(macOSの方がプリインストールされているフォントに恵まれているので)。

Consolas
Consolas

Courier

これはmacOSにもWindowsにもプリインストールされています。
字形は私好みではありません
macOSで見るときれいなのですが, Windowsで見ると壊滅的に汚いですね。

Courier on masOS
Courier on Windows
Courier on Windows

Courier New

これもmacOSにもWindowsにもプリインストールされています。
字形があまり私好みではありません。。

Courier New

monospace

Wikipedia先生に拠ればLinuxにプリインストールされているらしいです(手元にLinuxマシンがないのでスクショはない)。
ググった感じだと字形があまり好きではないですねw

どうなったの?

結局こうなりました。

pre.code {
    font-family: "Monaco", "Consolas", "monospace", "Courier New", "Courier", "sans-serif" !important;
}

github.com

このブログの一番最初の記事をテスト用の記事にしているのでどうなったか見てみたのですが, こんな感じになりました。

macOSではMonacoが使われています。

pre.code on macOS
pre.code on macOS

WindowsではConsolasですね。

pre.code on Windows
pre.code on Windows

ちなみにデフォルト設定のままだとCourierが優先的に使われるWindowsは, デフォルトはこんな感じでした。
汚い。。

pre.code on Windows(デフォルト)
pre.code on Windows(デフォルト)

おまけ

iPhoneにはMonacoもConsolasもインストールされていないみたいですね。
おそらくCourierシリーズのフォントが適用されています。
Courierシリーズの字形はあまり好きではないので残念ですが, こればかりはいたしかたなし。

iPhoneでの表示

Twemoji is used for a favicon on this page, which licensed under CC-BY 4.0.