font-familyがフォントの指定をするためのプロパティってことはわかってるけど、現場ではすでに固定の指定があって自分で指定することはなかったり、font-family指定はこれでOK！みたいなのをコピペしてきてばかりで、書き方をイマイチわかってない自分用メモ。
間違ってるところがあればぜひ指摘してください！
基本文法
font-family: family-name, generic-family;
↓例↓
body {
font-family: Helvetica, Verdana, sans-serif;
}
If Helvetica is available it will be used when rendering.
If neither Helvetica nor Verdana is present, then the user-agent-defined sans serif font will be used.
W3C Recommendation
https://www.w3.org/TR/css-fonts-3/#propdef-font-family
一番左に書いてあるフォントから、コンピュータにインストールされてるかどうか調べて、最初に見つかったもので表示します。
なので、Helveticaが見つかればHelveticaで表示、もしなければVerdana。
それもなかったら適当なsans-serifのフォントで表示する。
とりあえず、使ってほしい順にfamily-name書いて、最悪の場合せめてこのgeneric-familyにしてねって滑り止めを一番最後に書いておく。
family-name
上記の例だと、Helvetica, Verdanaがfamily-name。
, (カンマ)で区切って複数指定。↑の通り、見つからないとコンピュータが勝手にフォント決めちゃうから、複数予備を書いておく。
有名どころだと、ヒラギノ角ゴシック、メイリオ、游明朝とか。
generic-family
| keywords | 特徴 |
|---|---|
| serif | 文字の端に三角形の飾りがあるシュッとしたやつ |
| sans-serif | 飾りがないやつ |
| cursive | 筆記体。日本語フォントはあんま関係ない |
| fantasy | 装飾書体。小洒落たやつ。日本語フォントはあんま関係ない |
| monospace | 等幅フォント、もっと増えて〜〜〜 |
フォント一覧
MacならFont Bookアプリ。
左上の[i]ボタン押すとfont-familyに書く正式名称が確認できる。
family-nameは""(クォーテーション)で囲む？
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
<BODY STYLE="font-family: '21st Century', fantasy">
W3C Recommendation
https://www.w3.org/TR/css-fonts-3/#propdef-font-family
空白、数字、またはハイフン以外の句読点を含むfamily-nameのときはクォーテーションつけることを推奨するよ！って感じ。
なので、Helveticaはクォーテーション不要。ＭＳ Ｐゴシックは空白があるからクォーテーション必要。
''（シングルクォーテーション）と""（ダブルクォーテーション）どっち？
どっちでもOK。
例と疑問
body{
font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"ヒラギノ角ゴシック W3","Hiragino Sans",YuGothic,"メイリオ",Meiryo,sans-serif;
}
日本語と英語で同じの書くのなんで？
"メイリオ", Meiryo, とか、同じじゃないの？
結論：同じ
日本語で書くと認識されない場合があるそうで、英語名も書く。
じゃあ英語名だけでいいんじゃないの？と思うんですが、昔はどっちも書いておいた方が良いとされてたそうで
今でも、念の為そうしてるところが多いっぽい。
参考：https://www.foxism.jp/entry/2019/04/06/183108
"Noto Sans JP" ってよく見かけるけどなに？
Google fonts（ https://fonts.google.com/ ） の一つ。
よくわかんないけど人気。
詳しくは↓がわかりやすかったです。
参照：https://plu-plu.net/notosansjp/
-apple-system, BlinkMacSystemFont ってなに？
Appleのシステムフォントの指定。
- -apple-system：Safari用
- BlinkMacSystemFont：Chrome, Opera用
もうちょっと勉強してから追記します〜
補足
日頃からフォントを意識してみる
Chrome拡張子：WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
カーソル当てるとなんのフォント使ってるのか表示してくれる拡張子。