font-family

参考:

font-family | MDN

使い方

参考:

2021年に最適な font-family の書き方 | ICS MEDIA

font-family の正しい指定方法とおすすめフォント設定まとめ | WiLLMail

font-family の正しい指定方法と書き方/効かない原因や Google Fonts の使い方も | creive

フォントの種類の指定 | Let’s begin CSS

どの環境でも綺麗なゴシック体、明朝体のフォントを指定する | GRAYCODE HTML & CSS

CSS で游ゴシックやメイリオなどの font-family を指定するときのベストプラクティス | SPYWEB

font-family | W3Schools

ジェネリックフォントファミリ

  • serifセリフ体/明朝体
  • sans-serifサンセリフ体/ゴシック体
  • monospace等幅フォント
  • cursive筆記体
  • fantasy装飾体

参考:

font-family の generic-family プロパティについて – Qiita

総称ファミリ一覧と CSS でのフォント指定方法 | キーワードノート (kw-note.com)

デフォルトフォント

参考:

Web ブラウザのデフォルトのフォント | iPentec

ブラウザのデフォルトフォント | もうパンツはかない

日本語フォント

Windows
  • 游ゴシック (Yu Gothic)
  • 游明朝 (Yu Mincho)
  • メイリオ (Meiryo)
Mac
  • ヒラギノ角ゴシック (Hiragino Sans / Hiragino Kaku Gothic ProN)
  • ヒラギノ明朝
  • San Francisco (-apple-system / BlinkMacSystemFont)
  • Helvetica Neue
  • Menlo
  • Osaka
iOS
  • Hiragino Sans
  • San Francisco
  • Helvetica Neue
Android
  • Roboto

参考:

font-family について本気で考えてみた – Qiita

2020年まで使える font-family おすすめゴシック体 – Qiita

CSS の font-family オススメ設定 | Anyushu

2016-17年最強の Font Family 設定/ゴシック体 | ミルログ

日本語向けフォントスタックの現状 | yuhei blog

モダン日本語フォント指定 | Speaker Deck

Mac

参考:

Mac Catalina Web でのヒラギノフォント表示問題について考えたメモ | かもメモ

macOS Catalina で CSS フォントが明朝体で見にくくなったときの対処法 | iwb.jp

macOS Catalina の Google Chrome 明朝体フォント問題 | ウェブクエスト

macOS Catalina の Chrome が明朝体で表示されるのを修正する方法 | ソフトアンテナブログ

Android

参考:

Android における最適なフォント環境を考えてみる | ミルログ

Web 制作で使える!Android で使えるフォント一覧 | ミルログ

デメリット

参考:

ページ側でフォントを指定するな!ユーザーに任せろ | ミルログ

macOS Catalina でヒラギノ角ゴ Pro/ProN がなくなって困ってる font-family の設定を考える | 榊原昌彦

macOS Catalina でフォントがおかしくなる

参考:

macOS Catalina で font-family 問題から CSS 記述を再考する | Apple Pi

まとめ/Tips

参考:

やめよう、CSS のシステムデフォルトフォント指定 | Chienomi

読みやすいフォントの CSS 設定例 | murashun.jp

基本的なテキストとフォントの装飾 | MDN

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です