昨日 Adobe がソースコードを表示する目的として 開発した「Source Code Pro」というフォントを公開しました.

ライセンスは SIL OPEN FONT LICENSE で SourceForge と GitHub で公開されています.

また, Googe Web Fonts でサポートされていたので 早速使ってみました.

Table of contents

• サンプルデモ
• 使い方

サンプルデモ

サンプルは jsdo.it で作りました.

Demo00 Demo01

Googe Web Fonts 経由で読み込み, textarea に適応させています. textarea に文字列を入力すると「Source Code Pro」が適応された文字列が表示されます.

全体的にキレイな印象です. また, I(アイ), l(エル), 1(いち)や O(オー)と0(レイ)の違いが明確で見やすいですね. さすがソースコード表示を目的として作られただけのことはありますね!

up

使い方

Google Web Fonts 経由で「Source Code Pro」を使う方法について解説します.

まず, 下記のように link タグで font 情報を読み込みます.

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

そして適応させたい要素の font-family に 'Source Code Pro' を 指定するだけです.

今回のサンプルでは下記のように textarea に適応させています.

textarea {
    font-family: 'Source Code Pro', sans-serif;
    font-size: 20px;
}

たったこれだけで適応されます. 簡単ですね♪

up

このブログではソースコードに ‘Consolas’ や ‘Monaco’ を使っているけど, こりゃ採用を検討しなきゃなぁ～