【CSS】font-family の使い方、font-familyの一覧、おすすめの設定例は?|HTML&CSS入門講座(9)

HTML&CSS
この記事は約8分で読めます。

はじめに

 HTML&CSS入門講座の第九弾として、【CSS】font-family の使い方、font-familyの一覧、おすすめの設定例は?ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

●font-familyとはどのようなもの?
・フォントファミリー名
・総称フォント名
●主要なOSで利用されているフォントには何があるの?
●font-familyの書き方はどうするの?
・font-familyの書き方の決まり事
・おすすめのfont-familyの書き方の例
 HTML&CSS入門講座(8)では、max-widthとmin-widthの使い方について解説してきました。
 
 CSSの中のfont-familyn の使い方、font-family の使い方、font-familyの一覧、おすすめの設定例は?などについて深堀していきます。

font-familyとは?

 CSSの中でfont-familyプロパティーを指定することにより、パソコンやスマホで使われるフォントの種類を指定することができます。

 ユーザー各自の端末がどのようなフォントを使用しているかは、端末に依存し、そのような場合は、font-familyプロパティーを利用して、どの端末にも適合するフォントを順番に指定します。

 font-familyプロパティーには、「フォントファミリー名」、「総称フォント名」を指定します。

フォントファミリー名

 具体的なフォント名で、例えば、「Arial」、「「メイリオ」などの欧文フォントや日本語フォントなどの名称です。

 これらフォント名をfont-familyプロパティーに指定する際には、OSなどにより指定する固有名称が異なりますので注意する必要があります。

総称フォント名

 フォントを大きく分類したものを総称フォント名と呼びます。

 例えば、ゴチック体、明朝体、等幅フォントなどです。

 代表的な総称フォントを以下に載せます。(【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例より載せさせていただきました。)

総称フォント名 フォント分類 適用フォント
sans-serif ゴシック体フォント
メイリオ、ヒラギノ角ゴシック、Arial
serif 明朝体フォント
MS P明朝、ヒラギノ明朝、Times
system-ui OSのUIと同じフォント
Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco
monospace 等幅系フォント
MSゴシック、MS明朝、Osaka-Mono
cursive 筆記体系フォント Comic Sans MS、Scriptなど
fantasy 装飾系フォント alba、Chickなど

主要なOSで利用されているフォント

 Android端末では、作成するメーカーが多いために、フォントも種類が多く、一概に決めることができないために、font-familyを指定する必要は特にないと思っていますが、もし指定するならば、font-familyに「Roboto」、「Droid Sans」を指定しておくと良いでしょう。

 ここでは、Windows 、Mac、iphone、iPadでどのようなフォントが主に利用されているかを表にまとめました。

Windows Mac iphone、iPad
ゴチック体フォント
フォント名 font-familyでの表記 フォント名 font-familyでの表記 フォント名 font-familyでの表記
メイリオ Meiryo
メイリオ
メイリオ Meiryo
メイリオ
   
Meiryo UI Meiryo UI Meiryo UI Meiryo UI    
    ヒラギノ角ゴシック(Hiragino Sans) Hiragino Sans
ヒラギノ角ゴシック
ヒラギノ角ゴシック(Hiragino Sans) Hiragino Sans
ヒラギノ角ゴシック
    ヒラギノ角ゴシック ProN(Pro) Hiragino Kaku Gothic ProN
ヒラギノ角ゴ ProN
Hiragino Kaku Gothic Pro
ヒラギノ角ゴ Pro
ヒラギノ角ゴシック ProN(Pro) Hiragino Kaku Gothic ProN
ヒラギノ角ゴ ProN
Hiragino Kaku Gothic Pro
ヒラギノ角ゴ Pro
游ゴシック Yu Gothic
游ゴシック
游ゴシック YuGothic、游ゴシック体    
YU Gothic UI Yu Gothic UI        
    ヒラギノ丸ゴシック ProN(Pro) Hiragino Maru Gothic ProN W4
ヒラギノ丸ゴ ProN W4
Hiragino Maru Gothic Pro W4
ヒラギノ丸ゴ Pro W4
ヒラギノ丸ゴシック ProN(Pro) Hiragino Maru Gothic ProN W4
ヒラギノ丸ゴ ProN W4
Hiragino Maru Gothic Pro W4
ヒラギノ丸ゴ Pro W4
MSゴシック MS Gothic
MS ゴシック
       
MS Pゴシック MS PGothic
MS Pゴシック
       
    Osaka Osaka    
明朝体フォント
MS 明朝 MS Mincho
MS 明朝
       
MS P明朝 MS PMincho
MS P明朝
       
游明朝 Yu Mincho
游明朝
游明朝 YuMincho
游明朝体
   
    ヒラギノ明朝 ProN(Pro) Hiragino Mincho ProN
ヒラギノ明朝 ProN
Hiragino Mincho Pro
ヒラギノ明朝 Pro
ヒラギノ明朝 ProN(Pro) Hiragino Mincho ProN
ヒラギノ明朝 ProN
Hiragino Mincho Pro
ヒラギノ明朝 Pro
欧文フォント
Arial Arial Arial Arial Arial Arial
    Avenir Avenir Avenir Avenir
Arial Black Arial Black Arial Black Arial Black    
Segoe UI Segoe UI        
    Helvetica Helvetica Helvetica Helvetica
    Helvetica Neue Helvetica Neue Helvetica Neue Helvetica Neue
    San Francisco San Francisco San Francisco San Francisco
Verdana Verdana Verdana Verdana Verdana Verdana
Times New Roman Times New Roman Times New Roman Times New Roman Times New Roman Times New Roman

font-familyの書き方

font-familyの書き方の決まり事

 font-familyの書き方には規則があります。

  1. 複数のフォントファミリー名を指定する場合は、カンマで区切って並べて書く。
  2. フォントファミリー名は、引用符で囲う
  3. 総称フォント名は引用符で囲わない
  4. 前に指定したフォントファミリー名が優先される。
  5. 欧文フォントのフォントファミリー名を先に書く
  6. 総称フォント名は、最後に入れる。

おすすめのfont-familyの書き方の例

 以上の規則の則って、font-familyを書いていけばよいのですが、以下におすすめの書き方が「サルワカ」さんの記事に書いてありましたので、以下に載せておきます。

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic';
 また、「【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例」の記事にも、おすすめの書き方が書いてありましたので、以下に載せておきます。

【ゴシック体の設定例】

font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;

【明朝体の設定例】

font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

【HTMLメール用の設定例】

font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif;;

おわりに

 如何だったでしょうか?

 font-familyとはどのようなもの?、フォントファミリー名、総称フォント名、主要なOSで利用されているフォントには何があるの?、font-familyの書き方はどうするの?、font-familyの書き方の決まり事、おすすめのfont-familyの書き方の例などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました