loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [ウェブデザイン] > 【CSS3】ソースコードを表示するためのフォント「Source Code Pro」をアドビが無料公開したのでついでにweb font を試してみた
この記事は約2分で読めます。
この記事は最終更新日から4年以上経過しているため現状にそぐわない可能性もあります。

【CSS3】ソースコードを表示するためのフォント「Source Code Pro」をアドビが無料公開したのでついでにweb font を試してみた

投稿日:2012.9.26

『ソースコードを表示するためのフォント「Source Code Pro」をアドビが無料公開』らしいので
早速当ブログでも実際に試してみました。

SIRIUSレビューイメージ画像

いずれは本格的に web fontsを勉強しないと

「Source Code Pro」の特徴としては
『モノスペース(等幅フォント)であること』
『間違えやすい大文字のI(アイ)と小文字の l(エル)と数字の 1(イチ)の区別がしやすいこと』
『大文字の O(オー)と数字の 0(ゼロ)の区別がしやすいこと』

などだそうです。

ということで当ブログでいつもコードの表示に使っている「SyntaxHighlighter Evolved」というプラグインが表示してくれるコード表示に使ってみることにしました。

下図 1枚目が通常のフォントで表示された時の画像、
2枚目が「Source Code Pro」フォントで表示したときのキャプチャ画像です。

キャプチャ画像

キャプチャ画像

 

ふ~む、敢えて導入しなくてもいいかなぁ。
どうでしょう。

区切り画像

ところで私がいくら「Source Code Pro」フォントを指定したからといって
見る人の PCにそのフォントがインストールされてなければ
表示上の見た目は一切変わらないんですよね。

これを実現するには CSS3の web fontsが便利そうです。
そこでついでに web fontsの導入もトライしてみましょう。

 

スポンサーリンク

導入方法

今回は「Google web fonts」を利用してみることにします。

上記リンクページを開くと下図のようになると思うので
「serach」のところに「Source Code Pro」と打ちこみます。

キャプチャ画像

 

すると下のように変わるので
フォント名を確認したら「Quick-use」をクリックします。

キャプチャ画像

 

最初にフォントの太さを選択する画面が出てきます。

複数選べば理論上はそれだけ読み込み時間が長くなってくるので
今回は最小限の Normal 400というものだけにチェックを入れます。

キャプチャ画像

 

そのまま下にスクロールすると下のような画面が現われるので
好みの呼び出し方を選択します。

今回は link 形式を選択して<head></head>間にコピーペーストしてみます。
さらに該当する部分のみにフォントファミリーの CSSを設定します。

キャプチャ画像

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LOTUS (TCD039)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ