きれいに魅せる英数字フォント一覧

英数字用のフォントをこだわるだけでもブログの印象を変える事ができます。

このブログではCSS3の『@font face』という方法で指定しておりますが、これを使用せずともきれいなフォントで魅せる事ができるのです。

今回は、私がデザイン制作の際に選んでいる英数字フォントを一覧にしてご紹介します。お気に入りのものがありましたら、ぜひ設定してみてください。

追記：2016/10/20
現在800以上ものフォントを用意しているGoogle Web Fontsを利用すると、とてもすてきなフォントでスタイリングすることができます。この記事でご紹介しているものとともに、以下のリンク先のフォントも合わせてご覧ください。

GoogleフォントをWebデザインに。設定方法や見出しに使えるオススメフォントのご紹介 - Bruno[ブルーノ]

英数字フォント一覧

●'Tahoma'
Beautiful Font Style 123456789

●'Arial'
Beautiful Font Style 123456789

●'Century Gothic'
Beautiful Font Style 123456789

●'Verdana'
Beautiful Font Style 123456789

●'Times New Roman'
Beautiful Font Style 123456789

●'Bookman Old Style'
Beautiful Font Style 123456789

●'Century'
Beautiful Font Style 123456789

●'Georgia'
Beautiful Font Style 123456789

●'Gautami'
Beautiful Font Style 123456789

●'PMingLiU'
Beautiful Font Style 123456789

●'Monotype Corsiva'
Beautiful Font Style 123456789

●'Comic Sans MS'
Beautiful Font Style 123456789

フォント設定方法

CSS編集画面にて『{font-family: 'フォント名';}』で設定します。

●ブログ全体に設定する場合

body {
font-family: 'arial',sans-serif;
}

●記事のみに設定する場合

.entry {
font-family: 'arial',sans-serif;
}

●記事の日付部分のみに設定する場合

.entry .date {
font-family: 'arial',sans-serif;
}

●サイドバーのみに設定する場合

#sub_a, #sub_b{
font-family: 'arial',sans-serif;
}

※フォント設定の際の注意点
複数のフォントを設定する際には、『,（カンマ）』で区切って指定してください。

英数字フォントの使い方

見出しなどに使用するときれいに魅せる事ができます。

1.見出しタイトル
2.見出しタイトル
3.見出しタイトル

【CSS】

.style {font-size: 15px}

.style span {
font-family: 'Georgia',serif;
color: #AD0D0D;
}

【HTML】

1.見出しタイトル
2.見出しタイトル
3.見出しタイトル

まとめとして

英数字フォントをうまく使用するだけで、画像を作成しなくともきれいなデザインに魅せる事ができるようになります。

今回ご紹介したフォントをぜひ試してみてください。

では、また書きます。