[CSS] webフォントをfont-familyでゴシック体や明朝体に変更する方法

あらすじ

font(フォント)とは、ウェブサイトを作る上では重要な要素です。
 
そんなフォントをCSSでは自由に操ることができてしまいます。

今回は具体的にどのような要素を変更することができるのかをご紹介していきたいと思います。

といった項目でご紹介します。

そもそもCSSが分からない！といった方はこちらをご覧くださいfa-arrow-circle-down

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

フォントの書式を指定するfont-family

font-familyとはCSSにて特定のフォントをホームページやウェブサイトなどに反映する際に使用するプロパティです。

実際の記述方法は以下です。

具体例1
font-family: “MP ゴシック”, Arial, Helvetica, Sans-serif;

font-familyの値には、フォント名を直接指定する方法とフォントのグループで指定する方法の2種類があります。

font名で指定する方法

まず、フォント名で直接指定する際に使用する代表的な日本語のフォント名には

といったものがあります。

また、アルファベットでの有名なフォント名には

があります。

これらフォント名の中から希望のフォント名を選択してfont-familyの値として指定してあげます。

具体例2
font-family: Courier, “MP 明朝“, “Times New Roman”, Serif;

上記具体例2のようにフォント名を複数指定すると、使用しているOSやパソコンが最初のcourierに対応していない場合、次に指定した"MP 明朝"をフォントとして選択し、"MP 明朝"にも対応していなければ、次のフォントと言った具合に順にユーザーの環境によって選択可能なフォントを自動で選択してくれます。

フォントのグループ名で指定する方法

フォントのグループには

の5種類があります。

これらの中から希望のフォントを選択し、font-familyの値として記述します。

具体例3
font-family: sans-serif;

基本的にはこのような記述の仕方はしません。

具体例2のように最初にフォント名を直接指定し、最後にフォントグループを記述するといった書き方がより一般的です。

その理由として、最初に具体的なフォントを指定し、最後にフォントグループを指定することで、指定した全てのフォントが対応していなかった際に、そのフォントにより近いグループを選択しておくことで、ユーザー環境に依存することなく自分の希望したフォントを表示させることができるからです。

フォントのサイズを指定するfont-size

フォントサイズを変更したい際に使用するのがこのfont-sizeプロパティです。

font-sizeを変更する際の値には

といった方法で指定することができます。

単位

単位には主に

といったものがあります。

パーセント

%(パーセント)で指定する方法は、基準となるフォントサイズに%で指定を加えることで、フォントサイズを指定できます。

例えば、デフォルトのフォントサイズは16pxですので、15pxで表示させたい時は

font-size: 94%;

20pxだったら

font-size: 125%;

といった感じです。

キーワード

キーワード(単語)には

といった種類があります。

具体例
font-size: large;

mediumを基準値とし、largeになると1.2倍、smallになると1.2倍少なくなるといった具合に、1.2倍ずつ変更することが可能です。

フォントのスタイルを指定するfont-style

font-styleには主に

の3種類を適用することができます。

具体例
font-style: italic;

italic(イタリック体)とoblique(斜体)の違いとは

ほぼほぼ似た書式のitalic(イタリック体)とoblique(斜体)ですが、その違いは何でしょうか。

Wikipedia(ウィキペディア)によると

ほとんどの場合上部が右に傾いているので、しばしば斜体と混同ないし同一視されるが、実際は両者は異なる概念である。

といったことが書かれています。

このことから、イタリック体と斜体は異なる概念だということはわかったかと思います。

また、斜体とは単純にフォントを斜体にしたもので、イタリック体はその斜体に、よりよく見せるために加工を加えたものと言われています。

フォントの大文字の表示方法を指定するfont-variant

font-variantではフォントの小文字を大文字に変更し、サイズはそのまま小文字と同じサイズに変更するsmall-capsと呼ばれる値を使用する際に使うプロパティです。

実際の記載方法

font-variant: small-caps;

表示のされ方

HELLO WORLD

といった具合になります。

フォントの太さを指定するfont-weight

font-weightとはフォントの太さを決めることのできるプロパティです。

といった方法で太さを指定することができます。

また、lighterとbolderを値に指定することで、一段階細くしたり、太くしたりすることができます。

まとめ

いかがだったでしょうか。

フォントとは奥が深く、ウェブサイトにとっては重要な要素であることはいうまでもありません。

フォントによってはサイトのイメージも変わってしまうといってもいいくらいです。

ぜひ、フォントに関するCSSを網羅して、ウェブサイト製作に役立ててください。