アイキャッチ画像
HOME > ウェブデザイン > 【CSS3】ソースコードを表示するためのフォント「Source Code Pro」をアドビが無料公開したのでついでにweb font を試してみた
公開日:2012.9.26
この記事は約2分で読めます。

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

この記事は最終更新日から6年以上経過しているため現状にそぐわない可能性もあります。

『ソースコードを表示するためのフォント「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を設定します。

キャプチャ画像

以上です。

スポンサーリンク

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

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

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