どんな装飾を加えることが出来るのか、
その種類と実際のタグの書き方について解説していきます。
・font-size編
・font-color編
・font-family編 ←今ここ
font-familyの指定方法
font-familyは、文字のフォントを指定するタグです。
font-family:'メイリオ';
エディタ内で使用するときはこちら↓
<span style="font-family:'メイリオ'">文字</span>
ゴシック体系のフォント
sans-serif
<span style="font-family:sans-serif">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?arial
<span style="font-family:arial">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?Gulim
<span style="font-family:Gulim">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?明朝体系のフォント
serif
<span style="font-family:serif">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?Batang
<span style="font-family:Batang">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?等幅フォント
monospace
<span style="font-family:monospace">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?DotumChe
<span style="font-family:DotumChe">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?装飾文字系のフォント
Monotype Corsiva
<span style="font-family:'Monotype Corsiva'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?筆記体系のフォント
HGP行書体
<span style="font-family:'HGP行書体'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?HG正楷書体-PRO
<span style="font-family:'HG正楷書体-PRO'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?Windowsフォント
ＭＳ Ｐゴシック
<span style="font-family:'ＭＳ Ｐゴシック'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?ＭＳ ゴシック
<span style="font-family:'ＭＳ ゴシック'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?ＭＳ 明朝
<span style="font-family:'ＭＳ 明朝'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?メイリオ
<span style="font-family:'メイリオ'">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?Meiryo UI
<span style="font-family:Meiryo UI">文字</span>
日本語ＡＢＣ ABC ａｂｃ abc あいう アイウ 123!?＊ ＊ ＊ ＊ ＊ ＊ ＊ ＊ ＊ ＊ ＊
こうして見てみると、色々なフォントがありますね。
日本語は、ひらがな・カタカナ・漢字と、かなり文字数が多いので
あまりフォントの数がないのですが、
英語圏では、ローマ字と数字のフォントだけ用意すればいいので
色々なデザインのフォントがあるようです。
ちなみに、昨年末アメブロのデフォルトフォントが
12px → 14pxへ、
ＭＳＰゴシック → メイリオへ変更がありましたね。
この大幅な変更により、ブログの記事レイアウトが崩れてしまった方も多いと思います。
CSS編集用デザインを使用している方は、
CSSの一番最後にこちらのタグを貼ると元のフォントに戻ります。
.articleText{
font-size:12px;
}
body, input, button, select, textarea {
font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3',Arial,Helvetica;}CSS編集用デザイン以外のスキンを使用している方は、
こちらのタグをフリースペースかプラグインに貼ると良いようです。
<style>.articleText{font-size:12px;}body, input, button, select, textarea{font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3',Arial,Helvetica;}</style>参考記事：アメブロのフォントサイズ変更の対応
それでは、ここまでお読みくださりありがとうございました。
他のfontシリーズに興味がある方はこちらから↓
・font-size編
・font-color編
・font-family編 ←今ここ
？」という
」
を入れて保存を押してください。