menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 3 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 5 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【PHP】PHPでシンプルなメールフォーム
  9. ( 8 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【Mac】MacにGoogle Driveをインストール
このエントリーをはてなブックマークに追加

【決定版】フォントの設定はこれで決まり❗️

【決定版】フォントの設定はこれで決まり❗️

こんにちは(・∀・)

CSSでフォントの種類を指定する場合、「font-family」で指定しますが、

フォントは何を指定してますか⁉️

font-family

定番の設定としては次のような感じですね。


.sample {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}

Windowsなら「メイリオ」や「MS Pゴシック」、Macなら「ヒラギノ角ゴシック」を指定していたと思います。

 

皆さんもご存知のGoogleのフォント設定は次の通りです。


.sample {
  font-family: arial,sans-serif;
}

とてもシンプルです。

「arial」と総称ファミリ名の「sans-serif」だけでWebサイトをゴシック体系で表示させる設定にしています。

この設定だと、Windowsなら「メイリオ」、無ければ「MS Pゴシック」、Macなら「ヒラギノ角ゴシック」、無ければ「Osaka」などのブラウザ標準フォントで表示され、英数字は「arial」で表示されます。

 

印刷などへの影響を考慮しなくてもよければWebサイトのフォント設定はこれで良いのではと思います。

個人的には「arial」ではなく「Verdana」を使いたいかな...というか使ってます。

游ゴシック・游明朝

字游工房のフォント「游ゴシック・游明朝」です。

特にゴシック体の「游ゴシック」は最近よく見るようになってきました。

ゴシック体にしては柔らかめの書体と、WindowsとMacの両方で使え、同じ表示にできるということで、当サイトでも最近使うようになりました。

CSSでは次のように設定します。


.sample {
  font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
}

Macでは普通に「"游ゴシック体",YuGothic」を指定、Windowsではフォントの太さ対策に、「"游ゴシック Medium","Yu Gothic Medium"」を指定して調整します。

San Francisco

Apple純正のフォント「San Francisco」を使用する場合は次のように記述します。


.sample {
  font-family: -apple-system,sans-serif;
}

しかし上記の指定ではChromeで「San Francisco」のフォントが反映しません。

なのでChromeでも「San Francisco」で表示できるように次のように記述します。


.sample {
  font-family: -apple-system,BlinkMacSystemFont
,sans-serif;
}

 

最後に、当サイトのフォント設定もご紹介します。

Webフォント以外は次のように設定していて、今現在の「決定版」です、当分これでいこうと思ってます。


.sample {
  font-family: Verdana,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
}

関連リンク

font-family【CSSリファレンス】

  • CSS font-family
このエントリーをはてなブックマークに追加