普通の人は気にもしないmonospace等幅フォントですが、プログラマであればエディタなどソースコードを書く前に設定する重要な要素。
例えばPHPを調べている人は、PHPを書ける、または書こうと思って目的のサイトを見ているはずです。
つまり、ソースコードを書く前の準備が終っていて、プログラミングフォントを導入している可能性が大いにあります。
技術系のサイトだとコードを公開することが多いので、役に立つはず。
適用されなくても問題なし。もし、該当のフォントを持っていたらちょっとだけ見やすくなるよ。
ささやかなユーザビリティを求めたコードが下記になります。
コード
@font-face {
font-family: "SourceHanCodeJP-Regular";
src: local("SourceHanCodeJP-Regular");
}
@font-face {
font-family: "M+ 1m";
src: local("M+ 1m");
}
@font-face {
font-family: "Rounded M+ 1m regular";
src: local("Rounded M+ 1m regular");
}
@font-face {
font-family: "Rounded M+ 2m regular";
src: local("Rounded M+ 2m regular");
}
@font-face {
font-family: "Rounded Mgen+ 1m regular";
src: local("Rounded Mgen+ 1m regular");
}
@font-face {
font-family: "Rounded Mgen+ 2m regular";
src: local("Rounded Mgen+ 2m regular");
}
@font-face {
font-family: "Yutapon coding Regular";
src: local("Yutapon coding Regular");
}
@font-face {
font-family: "Myrica M";
src: local("Myrica M");
}
@font-face {
font-family: "MyricaM M";
src: local("MyricaM M");
}
@font-face {
font-family: "Ricty Diminished Discord";
src: local("Ricty Diminished Discord");
}
@font-face {
font-family: "Ricty Diminished";
src: local("Ricty Diminished");
}
@font-face {
font-family: "Migu 1M";
src: local("Migu 1M");
}
@font-face {
font-family: "Migu 2M";
src: local("Migu 2M");
}
@font-face {
font-family: "VL ゴシック";
src: local("VL ゴシック");
}
@font-face {
font-family: "MeiryoKe_Gothic";
src: local("MeiryoKe_Gothic");
}
code,
kbd,
pre,
samp {
font-family: "SourceHanCodeJP-Regular",
"M+ 1m",
"Rounded M+ 1m regular",
"Rounded M+ 2m regular",
"Rounded Mgen+ 1m regular",
"Rounded Mgen+ 2m regular",
"Yutapon coding Regular",
"Myrica M",
"MyricaM M",
"Ricty Diminished Discord",
"Ricty Diminished",
"Migu 1M",
"Migu 2M",
"VL ゴシック",
"MeiryoKe_Gothic",
monospace;
}
こんな場面に有効
技術系ブログを書いていてWordPressのプラグイン「Crayon Syntax Highlighter」のようなものを使っている場合。
テーマ次第でクラスが変わりますが、コードはこのように書きます。
/* @font-faceは省略 */
.crayon-font-monaco * {
font-family: "SourceHanCodeJP-Regular",
"M+ 1m",
"Rounded M+ 1m regular",
"Rounded M+ 2m regular",
"Rounded Mgen+ 1m regular",
"Rounded Mgen+ 2m regular",
"Yutapon coding Regular",
"Myrica M",
"MyricaM M",
"Ricty Diminished Discord",
"Ricty Diminished",
"Migu 1M",
"Migu 2M",
"VL ゴシック",
"MeiryoKe_Gothic",
monospace;
}
Webにプログラミングフォントが適用される理屈
簡単に言うと、閲覧者がフォント源ノ角ゴシック Code JPを持っていたら'SourceHanCodeJP-Regular'というfont-familyを作り適用します。
詳しくは以下の記事で長ったらしく書いてます。
Chromeでも読みやすい游ゴシックを指定する方法
確認済みフォント
思いつきで書きました。
その為、十分な検証を行っていません。'font-family'名が間違っている可能性があります。表示崩れなどが起こる可能性もあります。
コメントにご報告していただければ、修正します。
追記のご報告は「フォント名、'font-family'名」を記載してください。
暇があれば追記します。
確認済み
SourceHanCodeJP-Regular
https://github.com/adobe-fonts/source-han-code-jp/releases
M+ 1m
M+ 2m （表示崩れあり
https://mplus-fonts.osdn.jp/index.html
Rounded M+ 1m regular
Rounded M+ 2m regular
http://jikasei.me/font/rounded-mplus/
Rounded Mgen+ 1m regular
Rounded Mgen+ 2m regular
http://jikasei.me/font/mgenplus/
Yutapon coding Regular
http://net2.system.to/pc/font.html
未確認
Myrica M
https://myrica.estable.jp/
MyricaM M
https://myrica.estable.jp/myricamhistry/
Ricty Diminished Discord
Ricty Diminished
http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html
Migu 1M
Migu 2M
http://mix-mplus-ipa.osdn.jp/migu/
VL ゴシック
http://vlgothic.dicey.org/
MeiryoKe_Gothic
http://www.geocities.jp/meir000/meiryoKe/
問題点
@font-faceは重い処理と言われています。
がしかし、その程度の処理で重いと感じるスペックのPCをプログラミングフォントを使う人が使用しているのでしょうか？
最後に
ゴシック体：Chromeでも読みやすい游ゴシックを指定する方法
明朝体：font-familyに游明朝を使用してはいけない理由
等幅フォント：この記事
各フォントタイプについて記事を書きましたので、気になる方はご覧ください。
ちなみに私はフォントオタクではありません。
最も多用するフォントはヒラギノ角ゴとHelveticaです。