いいね！
最近HTML・CSS・PHPと睨めっこしてる時間が長いので、ソースコードの表示に最適化されているフォントを探してみました。
魅力的なフォントがたくさんあったんですが、Adobeの開発した
Source Code Proというフォントが個人的に一番読みやすくて綺麗だったので紹介します。
Webフォントとしての利用もOKなので、ブログ上でコードを公開する際にも便利ですね！
サンプル
読み間違えやすい「l・１・｜」や「O・0」などがしっかり区別されています。
これは捗る。
Webフォントとして利用する方法
Webフォントが公式で用意されているので、すぐに使いはじめることが可能です。
①のコードを</body>の直前にコピペして、②のコードをWebフォントを適用したいセレクタの中にコピペ。これで終わりです。
それでは試しに表示させてみます。
.code{
font-family: source-code-pro, sans-serif;
background-color: #f7f7f7;
border: 1px solid #aaa;
line-height: 20px;
margin: 20px 0;
padding: 0 1em 20px;
word-wrap: break-word;
white-space: pre-wrap;
}
良い感じですね！
興味のある方は是非使ってみてください！
関連するかもしれない記事
