monospace fontを指定した話
ウェブサイト開発
- TOP
- Old Archives
- monospace fontを指定した話
Mimir YokohamaのCSSでmonospaceをより積極的に指定するようになった。
pre,code {
font-size: 100%;
font-family:
/* Assuming user installed */
"Input Mono Compressed", "Input Mono Condenced", "Input Mono Narrow", "Input Mono", "Meslo LG S", "Anonymous Pro", "Hack", "Envy Code R", "Luculent", "mononoki", "Anka/Coder Condensed", "Anka/Coder Narrow", "Cousine", "Fantasque Sans Mono", "NK57 Monospace Sc Rg", "Go Mono", "FreeMono", "Terminus", "Iosevka Term", "OCRB", "PT Mono", "Space Mono", "Telegrama", "Cica", "Myricam", "Myrica",
/* Popular monospace fonts (User?) */
"Ubuntu Mono", "Ricty", "Source Code Pro", "Noto Mono", "Inconsolata", "Sudo", "Migu 1M",
/* Assuming system installed */
"Source Han Code JP", "VL Gothic", "Liberation Mono", "Menlo", "Osaka-等幅", "Monaco", "Ubuntu Mono", "DejaVu Sans Mono", "Droid Sans Mono", "Consolas", "Courier New", "Courier", "Bitstream Vera Sans Mono", monospace;
/* Explicitly avoid
"Fira Code", "NovaMono", "CPMono_v07", "Nimbus Mono L", "Iosevka", "Roman Fixed-width", "Tlwg Typist", "TlwgMono", "TlwgTypewriter", "agave", "monofur", "Lucida Mono", "Monoid";
*/
}Mimir Yokohamaにはプログラミング関連の記事があるが、基本的には初心者向けである。
そのため、ユーザーはプログラミング向けのフォントを持っていない可能性もある。 また、そうでなくてもブラウザのmonospaceフォントをプログラミング向けのフォントに設定している可能性は低い。
日本語OSの場合、Windowsではデフォルトに“ＭＳ ゴシック”、Macでは“平成角ゴシック”が使用される。 これらはいずれもコードの表示には全く適さない。
英語環境の場合はWindowsは“Courier”, Macは“Courier New”が使われるようだ。適しているとはいえないが、いくらかマシである。
だが、現在の環境では1それぞれコーディング向けのフォント、Windowsなら “Consolas” が、Macなら “Menlo” が導入されている。 なので、次のようにすれば話は解決する。
code {
font-family: "Menlo", "Monaco", "Consolas", monospace;
}Linuxのことも考えなくてはいけない。 Linuxの場合はコーディングに適したフォントが豊富なので心配する必要はないのだが、日本語環境だとmonospaceが “IPA ゴシック” だったりするかもしれない。 と、なるとこうなる。
code {
font-family: "Source Han Code JP", "VL Gothic", "Noto Mono", "Ubuntu Mono", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "TlwgTypewriter", "Lucida Mono", "Menlo", "Monaco", "Consolas", "Courier New", "Courier", monospace;
}だが、私は無意味なシステムデフォルトフォントの強制などしない。 ユーザーがわざわざ(おそらくは好みによって)インストールしているものは尊重されるべきだ。
そこで、「わざわざインストールした可能性の高いものを優先する」というポリシーで追記した。
ただし、グリフ変形のあるフォント、モノスペースではあるがコードとしての読みやすさに欠けるフォントは除外した。 これは、コードに慣れていない初心者に無用な混乱をもたらさないためだ。
一方、初心者が学びに使用する上で望ましいフォントとしてInputを挙げている。 そのためにインストールガイドまで容易するほどだ。
Inputを配布しないのはInputがライセンス上それを許していないためである。
また、Webフォントとして利用することもInputは許可していないが、それを別としても(和文フォントのように重いわけではないが)表示に必須ではないにもかかわらずそれなりにサイズのあるフォントをダウンロードさせることは全く好ましくないため、Inputに限らずWebフォントを使うのではなく、できるだけコーディングに適したフォントで表示させる、という方法を取っている。
また、Sans-serifやSerifと違って意図したように表示されない場合の問題が大きいため、かなり記述量が網羅的に多くなっている2。
なお、monospaceフォントの記述を行ったのは、これからプログラミング関連の記事を更新するための布石でもある。
実はChiemoniでも同様の問題を考慮して同様の記述を加えている。