『スラスラわかるHTML&CSSのきほん』では、フォント関係のプロパティをあまり多く取り上げていません。環境によってはフォントを指定しても変化がわかりづらいため、書籍には掲載しませんでした。HTMLやCSSに慣れてきて、Webページの完成度をもっと上げたくなったら、フォントを変えてみましょう。今回は、書籍で紹介しなかったCSSプロパティを中心に、基礎的なフォントの操作を紹介します。

『スラスラわかるHTML&CSSのきほん』p.144

フォントをボールド／通常にする

　フォントの太さ（ウェイト）を変更するには、font-weightプロパティを使います。値はboldもしくはnormalです。boldであれば太字、normalであれば通常のウェイトで表示されます。

font-weight: bold;

フォントをイタリック／通常にする

　フォントをイタリックにするには、font-styleプロパティを使います。値はitalicもしくはnormalです。italicであればイタリック、normalであれば通常で表示されます。

font-style: italic;

フォントのサイズを変更する

　こちらは書籍でも紹介していますが、フォントサイズを変更するのはfont-sizeプロパティです。値はフォントのサイズを数値で指定します。

font-size: 1.5em;

フォントを変更する

　Webページを見るパソコンにあらかじめインストールされているフォントを利用する方法です。フォントを変更するのはfont-familyプロパティを使用します。値には使用したいフォントのフォント名を指定します。その際、フォントをコンマで区切って複数指定することができます。複数のフォントを指定しておくと、閲覧に使用しているパソコンにインストールされているフォントが適用されます。複数の該当するフォントがインストールされている場合は、先に出てきたほうが適用されます。

font-family: font-name1, font-name2, …;

フォントを変更する具体例

　フォントをゴシック体にしたいときには、一般的には次のように記述します。このように記述すれば、Windows、Macともに、システムのデフォルトフォントで表示されることになります（ただし、Windowsにヒラギノ角ゴシックPro W3書体がインストールされている場合はそれが表示されます）。

　書き方に少し注意しなければならないところがあります。"ＭＳ Ｐゴシック"は、英字、スペースを含めすべて全角にします。そうしないとフォントが適用されません。

p {
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

　フォントを明朝体にしたいときは次のように記述します。しかし、明朝体はきれいに表示できないパソコンも多く、場合によっては非常に読みづらくなるためあまりおすすめしません。こちらも"MS　P明朝"はすべて全角にする必要があります。

p {
    font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "MS PMincho", "MS　P明朝", serif;
}