KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#5 「CSSのフォント設定を学ぶ」

この記事をシェアする

今日やったこと

フォントの設定を勉強する

フォント設定の書き方

セレクタ {font-family: フォント名;}

フォント名の部分には複数入力するのが基本。

理由としては、OSによって持っているフォントの名前は異なる。

windowsにはあってOSXにはないなどの状況が考えられる。

複数書かれた場合、書かれた順にフォントを優先して設定する。

複数設定する際の注意点

英語フォントを最初に書いておく

フォントには、英語フォントと、日本語+英語フォントに分かれている。
そのため、英語フォントを別にしたいときは、先に英語フォントを記載しておく必要がある。

* * フォント名に半角スペースが入っているもの

こいつらには、シングルクオテーション「'」かダブルクオーテーション「"」で囲ってあげないといけない。

総称フォントファミリー

フォント名の最後に総称フォントファミリーを設定しておくとよい
これは、もしこちらで設定したフォントをブラウザ側が持っていいなかったら、
ブラウザが必ずデフォルトで持っているフォントを設定して表示してくれる。
※総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定するとよい。

フォント設定する際に参考にすると便利なサービス

各端末で持っているフォントって何があるんだろう

以下のページで確認できます。めちゃめちゃ便利!
saruwakakun.com

あとは、Google Fontsもとっても便利!

「あのページで使っているこの文字にはどんなフォント名が指定されているか」を簡単に把握することができます!
saruwakakun.com

まとめ

フォント指定はなかなか奥深かったですね。

サービスとかうまく活用しながら学んでいかないといけませんね。

次回は文字の装飾をしていきます。

CSSの基本としては次回でラスト!!