アイキャッチ画像
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を設定します。

キャプチャ画像

以上です。

スポンサーリンク

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

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

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

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