
© 2014 Steve Francia
Windows環境の時だけコードブロックのフォントが汚いので直した
このサイトをビルドする時に毎回感じつつスルーしていましたがもう我慢できません
コードブロックのフォントがコマンドプロンプトみたいで鬼ダサいので直すことにしました
自分の使用している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してくれ~!