font-familyを設定してみた。【入門】フォントと見た目を紹介【CSS初心者】

font-familyの入門

こんにちは、いどはるです。

私はドットインストールでプログラミングを学んでいます(今回の記事はCSS基礎文法入門#08)。

文字の見た目を決めるfont-familyについて学んだので、記事にしています。

CSSでは、フォントを設定しておきますが、サイトの訪問者が使う端末によって見ることができるフォントが異なる場合があります。

そのためにフォントを複数設定する必要がある。こんな構造になっているなんて知りませんでした^^

複数設定する構造や、各フォントの見た目を紹介します。

なお、私はテキストエディタAtomを使用しています。

AtomというエディターとGoogle Chromeを使うことで、HTMLやCSSの文書を作成することができます(参考:【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンHTML/CSSの学習環境を整えよう [Windows編]HTML/CSSの学習環境を整えよう [macOS編])。

font-familyプロパティで、フォントを指定

フォントを指定するには、font-familyプロパティを使う必要があります。

こんな感じで、CSSを記述。

body {
font-family: Verdana, ‘Arial Black’, メイリオ, sans-serif;
}

ここでは、セレクターをbodyにしています。bodyに対してfont-familyを設定したことになります。以下に詳しく説明します。

ちなみに、セレクターはどこにCSSを反映させるかという部分。

CSSで設定する箇所をセレクターという

font-familyは優先度の高い順に複数書いておく。端末によって見れるフォントが違う

font-familyは、左から順番にコンピューターに指示を出す仕組みです。

上にあげたコードを再掲。

body {
font-family: Verdana, ‘Arial Black’, メイリオ, sans-serif;
}

このコードであれば、「Verdana」をまず使ってとコンピューターに指示出し。もしVerdanaが無ければ、Arial Blackを使ってと指示を出す。無ければメイリオを使って。という意味。

たしかにwindowsとmacでフォントの見え方が違うし、スマホもたくさんありますしね。それぞれに合ったフォントに自動で変えてくれているんです。

各フォントを見てみよう

上で紹介したコードのフォントがどんなものか紹介します。

下のフォント画像は、font-familyメーカーを参照しています。

Verdana

Verdanaのフォント

↑ 下のアイコンは、表示できる端末。Windows、Mac、iPhone・iPadで表示できるようです。

Arial Black

Arial Blackのフォント

↑ こちらは、Windows、Macでのみ表示可能。

メイリオ

メイリオのフォント

↑ メイリオは、Windowsのみで表示可能。日本語のみです。

最後は「総称フォント」で、ブラウザに選んでもらいます

font-familyでは、左から順番に端末に合うフォントを選んでもらいますが、どのフォントも端末に無い場合、「総称フォント」を利用します。

↓ の場合、一番右の「sans-serif」はフォント名ではなくて、「総称フォント」と呼ばれるもの。

body {
font-family: Verdana, ‘Arial Black’, メイリオ, sans-serif;
}

以下に、総称フォント4つ、「san-serif」「serif」「cursive」「monospace」を紹介します。

下のフォント画像は、総称ファミリ名分類のフォント名一覧を参照しています。

san-serif

sans-serifの書体

↑ sans-serifは総称フォントの「ゴシック系」。次に紹介するserifは、このsan-serifの「文字がハネる部分」があるフォント。

sans-serifは他にもいろいろあります。詳しくは総称ファミリ名分類のフォント名一覧を参照ください。

serif

serifの書体

↑ serifは総称フォントの「明朝系」。1つ上で紹介したsan-serifは、このserifの「文字がハネる部分」が無いフォントです。

serifにも、他にいろいろあります。詳しくは総称ファミリ名分類のフォント名一覧を参照。

cursive

cursiveの書体

↑ cursiveは総称フォントの「筆記体」。cursiveにも、他にいろいろある。詳しくは総称ファミリ名分類のフォント名一覧

monospace monospaceの書体

↑ 最後にmonospaceは総称フォントの「等幅フォント系」。詳しくは総称ファミリ名分類のフォント名一覧

font-familyを指定する際の注意点

4つ紹介。

1行で書く

body {
font-family: Verdana, ‘Arial Black’, メイリオ, sans-serif;
}

改行せず、1行で書くこと。スマホで見ている方は、画面を横にしてみてください。横長に表示されるはず。

空白が入るフォント名はシングルクォーテーションか、ダブルクォーテーションで囲う

‘Arial Black’の部分ですね。真ん中に空欄があるので「’〜’」か、「”〜”」で囲う。

@charaset”UTF-8″

ファイル名に日本語を指定した場合、文字化けする可能性があります。CSSファイルの先頭に@charset”UTF-8”と書いておくと防げる。

(余談ですが、プログラミング言語のPythonでスクレイピングというのをやったことがあります。webページ情報をExcelに落とすもの。

この際も、UTF-8設定があるかどうかで文字化けを防げました。文字化けが起こったら、UTF-8の設定がポイントになることもあるようです)。

font-familyは、継承されるプロパティ

font-familyは継承されるプロパティなので、親要素のbodyから、子要素の見出しやパラグラフにも反映されます。

以上となります。font-familyはかなりの量のフォントがありそうですが、まず超基本の上記フォントを抑えていきます。

ドットインストールCSS基礎文法入門#08も参考にしてみてください。では!