Source Code Pro #LOVEFONT

マークアップに最適?手軽に導入できるコード用フォント。

Source Code Pro #LOVEFONT

こんにちは、Yuuです。Advent Calendarの企画#LOVEFONTということで、Source Code Proの紹介をしたいと思います。本当はデザイン時のお気に入りフォントとかでもよかったかもしれないのですが、最近まで無頓着だったエディタ用フォントに焦点置いてみました。

Source Code Proとは?

Adobeが9月24日あたりに発表した、オープンソースの等幅フォントです。
http://blogs.adobe.com/typblography/2012/09/source-code-pro.html

もともと、エディタ用にフォントを変えることをしていなかったので、ちょっと試してみようかなって感じで使い始めました。
そのままフォントフォルダに入れるだけって感じでお手軽感があります。

Source Code Proの特徴


横にちょっと長い感じがあるせいか、何やら小文字が丸くて、ちょっとかわいいかもってのが最初の印象。

モノスペースと文字の区別


等幅で作られているため、すべて文字数・文字列長が同じのため、ソースコードが見やすくなっています。
特に特徴的なのは、「0(数字のゼロ)」と「O(英字のオー)」の区別や「1(数字のイチ)」と「l(小文字のエル)」など、ぱっと見で区別がしにくい単語と数字が分かりやすくなってます。ゼロが点なのが何やら今まで見てなかっただけに新しい感じ。

ウェイトの種類


6種類ほど用意されています。英文見出しとかにも使えそうな感じです。

ライセンス

Open Font License 1.1に基づいて配布されており、フリーフォントとなります。
日本語訳はこちら
基本的に、フォントの使用・研究・改変・再配布が可能なライセンスです。ただ、Rictyみたいに特定ライセンスの日本語と合成する場合などは、フォント自体は配布できないのでご注意を。その場合は、合成スクリプトを配布する感じになるんでしょうか。

実際に使ってみる

Sublime Text 2で使う

最近流行りのSublime Text 2のフォントに指定する。

「Preferences> Settings - User」を開いて、下記を記述。

"font_face": "Source Code Pro"

設定するとこんな感じ。

ブログのソースコード表示に

各種ウェブフォントサービスにも登録されているようなので、ブログのソースコード表示にも。Googleを使うのであれば、下記を記述。

head要素でウェブフォントを読み込み。

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

CSSで指定。

code {
  font-family: "Source Code Pro", sans-serif;
}

ダウンロード

というわけで、お手軽に導入できるSorce Code Proでした。
ちなみに、AdventCalendarのほうでは、普段使ってるcandara、Trajan、Calibri、Quicksandなども紹介があるとのことで、とても楽しみにしています。
明日は、Stocker.jpのなつきさんで、AquaKanaです。

トラックバック

TRACKBACK&PING

TrackBack URL :

コメントを残す

メールアドレスが公開されることはありません。