Adobe が公開したソースコードを表示するためのフォント「Source Code Pro」を早速使ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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

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

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

sample

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’ を使っているけど, こりゃ採用を検討しなきゃなぁ~

TRACK BACK URL

POST COMMENT

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

COMMENT