Learning site for website creation

CSS:font-familyで基本書体の指定

  • 投稿日:2019年12月15日
body {
  font-family:
    -apple-system,       
    BlinkMacSystemFont,  
    "Helvetica Neue",
    Meiryo,   
    "Yu Gothic",         
    YuGothic,           
    sans-serif;
}

ページ全体の書体を指定する際は「body」セレクタを使用する

英字から指定する

-apple-system: Mac 「Safari」用の英字フォント 「San Francisco」

BlinkMacSystemFont: Mac 「Chrome」「Opera」用の英字フォント 「San Francisco」

Helvetica Neue: Mac 「その他ブラウザ」用の英字フォント

日本語の指定

Meiryo:Windows用の日本語フォント「メイリオ」
※Windows の見やすさを優先させる際の選択

Yu Gothic:Windows用の日本語フォント「游ゴシック」
※MacとWindows で書体を統一する際の選択

YuGothic:Mac用の日本語フォント「游ゴシック体」

対象書体がない時の書体キーワード

sans-serif:上記書体がない場合にOS内に存在するゴシック体を自動選択させる
※iOS6 以降 iPhone の標準書体は明朝なので注意