Help us understand the problem. What is going on with this article?

Webにもプログラミングフォントを使おう

More than 3 years have passed since last update.

普通の人は気にもしない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」のようなものを使っている場合。

テーマ次第でクラスが変わりますが、コードはこのように書きます。

crayon-syntax-highlighter.css
/* @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です。

tsuka-rinorino
Vue.jsエンジニア。みんなキライなCSSが大スキです。CSS歴18年。ストックついでに「いいね」してもらえると嬉しいです。
https://sora-maru.io
onecareer
ワンランク上のキャリアを目指す学生のための新卒採用サービスONE CAREERの開発・運営会社
https://www.onecareer.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away