【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-uiOSの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でどのようなフォントが主に利用されているかを表にまとめました。

WindowsMaciphone、iPad
ゴチック体フォント
フォント名font-familyでの表記フォント名font-familyでの表記フォント名font-familyでの表記
メイリオMeiryo
メイリオ
メイリオMeiryo
メイリオ
  
Meiryo UIMeiryo UIMeiryo UIMeiryo 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 UIYu 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ゴシック
    
  OsakaOsaka  
明朝体フォント
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
欧文フォント
ArialArialArialArialArialArial
  AvenirAvenirAvenirAvenir
Arial BlackArial BlackArial BlackArial Black  
Segoe UISegoe UI    
  HelveticaHelveticaHelveticaHelvetica
  Helvetica NeueHelvetica NeueHelvetica NeueHelvetica Neue
  San FranciscoSan FranciscoSan FranciscoSan Francisco
VerdanaVerdanaVerdanaVerdanaVerdanaVerdana
Times New RomanTimes New RomanTimes New RomanTimes New RomanTimes New RomanTimes 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をコピーしました