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

Total 90 views
この記事の所要時間は約 2分です。

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

スポンサーリンク


 

 

いずれは本格的に 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を設定します。

キャプチャ画像

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




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