33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

フォントの指定方法について

本日の教材動画はこちら 

 本日はページ表示時に使われるフォントの指定方法についてです。今回も文字だけの記事になりますが座学ってことで!

フォントの指定方法について

フォントは「font-famil:"フォント名";」で指定します。場合によっては""が不要になりますので、詳しく見ていきましょう。

指定するフォント名について

フォントには大きく分けて「フォントファミリー名」と「総称フォント名」があります。フォントファミリー名は「メイリオ」や「Arial」など、具体的なフォント名のことです。逆に総称フォント名は「ゴシック体」や「明朝体」などの、フォントが属するカテゴリのことを指します。

総称フォントについて

総称フォントの指定で一番使われるのが「serif」と「sans-serif」です。serifは明朝体、sans-serifはゴシック体を指定します。monospaceなら等幅フォント系になります(主にプログラミングコードを表示する際に使用)他に等幅フォントや装飾系フォントなどもありますがあまり使われないようです。

指定するフォント名によって書き方を変える

フォントファミリー名で指定する場合は font-famil:"フォント名"; という風に、引用符でフォント名を囲ってあげましょう。逆に総称フォントを指定する場合は font-famil: フォント名 ; という風に引用符は不要になります。(つけると逆に正しく表示されなくなる)

フォントを指定する場所(記述する場所)

一般的にbodyタグに対してCSSで指定します。( body{fonto-famil:"フォント名";}という風に)一部分だけフォントを変えたい場合は今まで通りに記載すればOKです!(h1だけ変更したいなら h1{~…}という風に)

フォント指定で一番注意しなければいけない事

指定フォントが表示されるには、「見る人がそのフォントを所有している」必要があります。フォントを持っていない場合は代替フォントが表示されてしまうため、場合によっては狙ったフォント以外が表示される可能性があることに注意する必要があります。そのためフォントを指定する場合は広く使われているフォントを利用するのが一般的。表示されなかった場合の保険として総称フォントを指定してデザイン崩れを防ぐといいみたいです。

狙ったイメージでフォントを落ち着けるには

例えば「明朝体」であることを最終的に指定したい場合は下記のように記載します。

・font-family:"Times New Roman",Times,serif:

こうすることによって、まず最初に「Times New Roman」フォントを表示、それがない場合は「Times」フォントを、それもない場合は「明朝体」フォントを表示させることができます。

 これを応用して、下記のようにOSごとにフォントを指定しておくとイメージ通りのデザインが適応されるためおすすめとのこと。

・font-family:"游ゴシック(win用)","ヒラギノ角ゴ ProN(Mac用)" sans-serif:

 どのOSにどのフォントが入っているか、おすすめフォントはどれかなど、詳細については参照サイトさんが詳しく書いてくれているのでそちらをご覧ください!(フォントが多すぎて説明できないため)ひとまず自分の好きな標準フォントを見つけてまとめておけば、使う時に迷わなくてすみそうですね!今度私もいろいろみてみよう。

 

【参考サイト】

【2020年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例!