Razl-Dazl

eyecatch
© 2014 Steve Francia

Windows環境の時だけコードブロックのフォントが汚いので直した

Posted at — 2023-01-05

このサイトをビルドする時に毎回感じつつスルーしていましたがもう我慢できません

コードブロックのフォントがコマンドプロンプトみたいで鬼ダサいので直すことにしました

自分の使用しているHugoのテーマにはNormalize.cssが含まれており、コードブロックのフォントに関してはそちらから指定しているのですが、中を見てみると・・・

  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

このように、monospace(等幅フォント)としか指定されていません
つまり、各OSで既定の等幅フォントが自動的に適用される、という事です

要するに原因はWindows自体にありました

Microsoft絶許

WindowsにはConsolasというマトモな等幅フォントが入っているので、こちらを指定しました

code {
    font-family: Consolas, monospace;
}

ConsolasはWindowsにしか入っていないので、2番目にmonospaceも指定してあげて下さい

さもなくばiOSで明朝体フォントになったり、また面倒なことに・・・

Hugoのテーマに含まれるNormalize.cssのバージョンがかなり古かったので、その差し替えも試してみましたが意味ありませんでした
なので自分でCSSに追記するしか無いようです

Normalizeとは何だったのか

インターネットで調べ物しててもよくこの事象に遭遇しますが、Normalize.cssとWindows君が上手く噛み合ってないんだろうなー多分・・・

Normalize.cssはコードブロックもNormalizeしてくれ~!

Author@zakuro

Mastodon: 396@vivaldi.net