Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた
昨日 Adobe がソースコードを表示する目的として 開発した「Source Code Pro」というフォントを公開しました.
ライセンスは SIL OPEN FONT LICENSE で SourceForge と GitHub で公開されています.
また, Googe Web Fonts でサポートされていたので 早速使ってみました.
Table of contents
サンプルデモ
サンプルは jsdo.it で作りました.
Googe Web Fonts 経由で読み込み, textarea に適応させています. textarea に文字列を入力すると「Source Code Pro」が適応された文字列が表示されます.
全体的にキレイな印象です. また, I(アイ), l(エル), 1(いち)や O(オー)と0(レイ)の違いが明確で見やすいですね. さすがソースコード表示を目的として作られただけのことはありますね!
使い方
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; }
たったこれだけで適応されます. 簡単ですね♪
このブログではソースコードに ‘Consolas’ や ‘Monaco’ を使っているけど, こりゃ採用を検討しなきゃなぁ~
[adobe][font-family][font][web][フォント] / “Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/j8bbgk6C
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/gp6rZinw
RT @tmlife_jp: [adobe][font-family][font][web] / “Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/R83mXH2P
ずばりの名前でいいな http://t.co/flEHwGuu
ずばりの名前でいいな
【はてブ新着IT】 Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/Z1xE4JTC
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/oRciNWG2
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/c5S6fA5l
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life: 8 users http://t.co/oGBftytl
☆Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life☆ http://t.co/ZFX0KV6j [タグ「開発」を検索 – はてなブックマーク]
“Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/0bJgffIe
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life
http://t.co/eHdlaaVt
Iとlとか、記号間の紛らわしさを解消した書体ってことらしい
[TM Life] Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/Moc9tzHb
“Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/CNmqTA7V
RT @kensei_kick Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/gLZfuHhM
[コンピュータ・IT][MyInterest][font][adobe][フォント][web][font-family] / “Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみ…” http://t.co/oVmDyHYZ
“Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/ZYb6QP8k
はてな: Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/RDcQba3S
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/GuHhUQ0f
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/IvLJsmLC
[font] / “Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life” http://t.co/Any9Hv7q
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life (http://t.co/F3mooXhk) #news
コンピュータ・IT: Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/1sjbgMKZ
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/WGG2VnMq @phi_jpさんから
ほほー使う機会があったら。
これはみやすい.Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/DOFhs17f
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/IpHvCO5L
コレは便利そうかも? >Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/Nfq0PuGv @phi_jpさんから
結構いい感じ^^ | Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/0m3MULLl @phi_jpさんから
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた http://t.co/KyCGIwe7 @phi_jpさんから
Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた | TM Life http://t.co/olsrHkOg
[…] 可能となっており、使い方はこちらを参考にどうぞ。 […]
[…] Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた […]