今回のポイント
フォントを変えるだけで、サイトの印象が大きく変わります。
目を引くサイトを作成する為には必須と言っていい程の指定方法です。
今回は『font-family』というプロパティを使って解説していきます。
font-familyとは
font-familyとはフォントの種類を変更できるプロパティです。
font-familyの書き方
早速、font-familyの書き方について解説しますね。
p{ font-family: Arial;}
まずは指定したい要素を指定します。ここでは『p要素』ですね。
次に『font-family:』のプロパティでフォントを指定することを宣言します。
そしてArial,と記述していますが、これがフォント名となります。
フォントの種類については以下のサイトを参考にすると良いと思います。
https://saruwakakun.com/font-family
OSや端末によってフォントを対応する方法
OSや端末によって対応したフォントは異なります。
そこで複数のフォントを指定することにより、この問題を解決します。
どのように記述するかというと。。。
p{ font-family: ‘Avenir’,’Helvetica Neue’,’Helvetica’,’Arial’,’Hiragino Sans’,’ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’ }
このようにカンマでフォントを区切って記述することで、フォントを複数指定することができます。
そしてこの複数記述した場合のルールがあります。
- 前に書かれたフォントから順に優先されてブラウザ表示される。
- 日本語で書かれた文字は英語フォントでは表示されない。
これらのルールをうまく活用する為に、フォントを複数指定する場合は英語フォントから記述するようにしましょう。
いざという時の総称フォントファミリー名を書く
総称フォントファミリーとは、フォントを複数指定したが、いずれのフォントもブラウザで認識されなかった場合に表示させるフォント指定です。
総称フォントファミリーには以下の種類がありますので解説しておきます。
- sans-serif
- serif
- monospace
- cursive
- fantasy
それではそれぞれどのように表示されるか、見てみましょう。
いかがでしょうか。
このようにいざという時にも、総称フォントファミリーで表示できます。
フォントの指定をする時の注意事項
間に半角スペースの入るフォント名は『’』もしくは『”』で挟みましょう。
これをしないとフォントが認識されません。
例えば。。。
‘ヒラギノ角ゴシック’や‘ＭＳ Ｐゴシック’
などがそれにあたります。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
