等幅フォントで表示する方法 [CSS]

使い方

一般的な等幅フォントを使って表示する。

pre, code, var, samp, kbd, .mono {
  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  font-size: 14px;
  line-height: 1.2;
}

参考：

等幅フォントにするためのおすすめの font-family 指定 | DevAchieve

CSS まわりで pre code とか等幅フォントとか | by shigemk2

最強の font-family 指定 | Thought is free

font-family

参考：

font-family | スタイルシートリファレンス

pre 要素／code 要素

参考：

CSS まわりで pre code とか等幅フォントとか | shigemk2

pre 要素で折り返しをするための CSS | 小粋空間

Courier New

参考：

Courier / Courier New / Consolas | terkel.jp

Menlo

参考：

Menlo と Mac の等幅フォント | terkel.jp

monospace

参考：

CSS で font-family: monospace 指定だと等幅フォントが適用されない？ | Neo’s World

フォント一覧

参考：

monospace – font-family で指定できるフォント名一覧 | W3G

日本語フォント

参考：

游ゴシック／游明朝／メイリオを等幅表示する方法 | NUMBER-SHOT.NET

Ricty Diminished

リポジトリ：

edihbrandon/RictyDiminished: Ricty Diminished — fonts for programming – GitHub

参考：

CSS で等幅フォントの指定 | Yura YuLife

Ricty Diminished – プログラミング用フォント | Yasunori Yusa