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

普通の人は気にもしない`monospace`等幅フォントですが、プログラマであればエディタなどソースコードを書く前に設定する重要な要素。

例えばPHPを調べている人は、PHPを書ける、または書こうと思って目的のサイトを見ているはずです。
つまり、ソースコードを書く前の準備が終っていて、プログラミングフォントを導入している可能性が大いにあります。

技術系のサイトだとコードを公開することが多いので、役に立つはず。
適用されなくても問題なし。もし、該当のフォントを持っていたらちょっとだけ見やすくなるよ。
ささやかなユーザビリティを求めたコードが下記になります。

## コード
```css
@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」のようなものを使っている場合。

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

```css: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でも読みやすい游ゴシックを指定する方法](http://qiita.com/RinoTsuka/items/1e7b3ca1325e704bbc41)

## 確認済みフォント
思いつきで書きました。
その為、十分な検証を行っていません。'font-family'名が間違っている可能性があります。表示崩れなどが起こる可能性もあります。
コメントにご報告していただければ、修正します。

追記のご報告は「フォント名、'font-family'名」を記載してください。
暇があれば追記します。


##### 確認済み

SourceHanCodeJP-Regular
[https://github.com/adobe-fonts/source-han-code-jp/releases](https://github.com/adobe-fonts/source-han-code-jp/releases)

M+ 1m
M+ 2m （表示崩れあり
[https://mplus-fonts.osdn.jp/index.html](https://mplus-fonts.osdn.jp/index.html)

Rounded M+ 1m regular
Rounded M+ 2m regular
[http://jikasei.me/font/rounded-mplus/](http://jikasei.me/font/rounded-mplus/)

Rounded Mgen+ 1m regular
Rounded Mgen+ 2m regular
[http://jikasei.me/font/mgenplus/](http://jikasei.me/font/mgenplus/)

Yutapon coding Regular
[http://net2.system.to/pc/font.html](http://net2.system.to/pc/font.html)

##### 未確認

Myrica M
[https://myrica.estable.jp/](https://myrica.estable.jp/)

MyricaM M
[https://myrica.estable.jp/myricamhistry/](https://myrica.estable.jp/myricamhistry/)

Ricty Diminished Discord
Ricty Diminished
[http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html](http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html)

Migu 1M
Migu 2M
[http://mix-mplus-ipa.osdn.jp/migu/](http://mix-mplus-ipa.osdn.jp/migu/)

VL ゴシック
[http://vlgothic.dicey.org/](http://vlgothic.dicey.org/)

MeiryoKe_Gothic
[http://www.geocities.jp/meir000/meiryoKe/](http://www.geocities.jp/meir000/meiryoKe/)

## 問題点
`@font-face`は重い処理と言われています。
がしかし、その程度の処理で重いと感じるスペックのPCをプログラミングフォントを使う人が使用しているのでしょうか？

## 最後に
ゴシック体：[Chromeでも読みやすい游ゴシックを指定する方法](http://qiita.com/RinoTsuka/items/1e7b3ca1325e704bbc41)
明朝体：[font-familyに游明朝を使用してはいけない理由](http://qiita.com/RinoTsuka/items/32f3c015aac35b8e96a9)
等幅フォント：この記事
各フォントタイプについて記事を書きましたので、気になる方はご覧ください。

ちなみに私はフォントオタクではありません。
最も多用するフォントはヒラギノ角ゴとHelveticaです。