こんにちは、tanakaです。
今回は「font」プロパティの説明です。
「font」は、読みやすさに深く関わるフォントのプロパティです。
「読みやすいページ」を作るなら知っておいた方が良いでしょう。
しかし
プロパティ「font-family」は、少し難しくあります。
「font-family」が「よく分からなかったな」という方は、
とりあえず、以下の指定を入れておけば「大体なんとか」なります。
font-family: "Yu Gothic", YuGothic, "Yu Mincho", YuMincho, sans-serif, serif;それでは、
詳しく説明していきます。
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
その時は、
「ダブルクオーテーションなどの記号をいったん削除して、打ち直してください」
「font」とは？
「font」は、
「フォント」にまつわるプロパティです。
「フォント」は、
ページを作る上でとても大事なので覚えた方が良いでしょう。
「font」４種類のプロパティと一括指定
「font」には、
４種類のプロパティと一括指定があります。
１：font-family（使うフォントを決める）
２：font-size（大きさ）
３：font-weight（太さ）
４：font-style（斜体）
５：font ＝ 一括指定
それでは、
詳しく説明していきます。
１：font-family（使うフォントを決める）
「font-family」は、
使うフォントを決めるプロパティです。
「font-family」について話すと、
とても長くなります。
なので
重要な部分だけ説明します。
１：「Windows」と「Mac」のフォント
２：フォントの種類
３：総称ファミリー名
４：「font-family」指定方法
５：「font-family」注意点
それでは、
詳しく説明していきます。
「Windows」と「Mac」のフォント
「font-family」の前に、
フォントを表示する機械について説明します。
今現在、ページを表示する機械は「４つ」あります。
１：Windowsパソコン
２：Macパソコン
３：iphone、iPad（iOS）
４：スマホ、タブレット（Android）
これらの４つに内臓されているフォントは、
全て同じではありません。
機械の種類によっては、
フォントがあったり、無かったりします。
例えば、
| Windowsだけ | メイリオ、MS P |
| Mac、iOSだけ | ヒラギノ |
| Windows、Mac両方 | 游ゴシック、游明朝 |
このように機械、OSによって持っているフォントは違います。
ちなみにAndroidのフォントは、
よくわかりません。
フォントがなかったら「とりあえず機種依存文字で表示」
それでは、
指定したフォントがその機械になかったら
何も表示されないのでしょうか？
そんなことはありません。
「機械にないフォントを指定した」
「指定したフォントが無かった」
このような場合は、
とりあえず機械が持っているフォント（機種依存文字）で表示します。
なので
何か文字は出てくる仕組みになっています。（とても珍しい外国の文字でない限り）
フォントの種類
フォントは、たくさんの種類があります。
全て紹介できません。
なので
今回は、有名なフォントを紹介します。
ゴシック体
１：游ゴシック（Windows、Mac）
２：メイリオ（Windows）
３：ヒラギノ角ゴシック（Mac、ios）
＜游ゴシック（ゆうごしっく）＞
游ゴシックは「Windows、Macどちらにも入っている」フォントです。
「とめ」「はね」「はらい」の端が丸くなっているのが特徴です。
詳しくは「ゆうごしっく」で検索してください。
font-family: "Yu Gothic", YuGothic, sans-serif;＜メイリオ＞
メイリオは「Windows専用」フォントです。
「とめ」「はね」「はらい」が角ばっているのが特徴です。
詳しくは「メイリオ」で検索してください。
font-family: Meiryo, sans-serif;＜ヒラギノ角ゴシック＞
ヒラギノ角ゴシックは、「Mac、ios専用」フォントです。
クセがなく読みやすいフォントです。
詳しくは「ヒラギノ」で検索してください。
font-family: "Hiragino Kaku Gothic ProN", sans-serif;明朝（serif）
１：游明朝（Windows、Mac）
２：MS P明朝（Windows）
３：ヒラギノ明朝（Mac、ios）
＜游明朝（ゆうみんちょう）＞
游ゴシックは「Windows、Macどちらにも入っている」フォントです。
明朝特有の美しさがあり、読みやすくキレイ。
詳しくは「ゆうみんちょう」で検索してください。
font-family: "Yu Mincho", YuMincho, serif;＜ヒラギノ明朝＞
ヒラギノ明朝は「Mac、ios専用」です。
「はね」「はらい」がのびやかなフォント
詳しくは「ヒラギノ」で検索してください。
font-family: "Hiragino Mincho ProN", serif;総称ファミリー名
総称ファミリー名とは、
フォントを「ジャンルでまとめた」フォント集です。
ゴシックは、ゴシックでまとめたフォント集。
明朝は、明朝でまとめたフォント集。
そのような感じです。
「総称ファミリー名」で指定した場合、
「総称ファミリー」の中からOS、ブラウザが適切なフォントを選択してくれます。
「font-family」は、
「フォント名」「総称ファミリー名」どちらでも指定ができます。
font-family: Meiryo, sans-serif;＜総称ファミリー一覧＞
| 総称ファミリー名 | 所属するフォント | |
| sans-serif | ゴシック | 游ゴシック メイリオ ヒラギノ角ゴシック など |
| serif | 明朝 | 游明朝 ヒラギノ明朝 など |
| cursive | 英文・筆記体 | 主にアルファベット のため説明は省略 |
| fantasy | 英文・装飾系 | 主にアルファベット のため説明は省略 |
| monospace | 等幅 | MSゴシック MS明朝 MS P明朝 |
「font-family」指定方法
「font-family」の指定には「ルール」があります。
そのルールは「””をつけるか」「””をつけないか」です。
＜「font-family」指定での「””」ルール＞
| フォント名の状態 | ”” | 指定のやり方 |
| 連続するアルファベット | なし | font-family: YuGothic font-family: YuMincho font-family: Meiryo |
| 日本語のフォント名 | あり | font-family: “MS P明朝” |
| 間にスペースが入るアルファベット | あり | font-family: “Yu Gothic Medium” font-family: “Yu Mincho” font-family: “Hiragino Mincho ProN” |
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
その時は、
「ダブルクオーテーションなどの記号をいったん削除して、打ち直してください」
「font-family」注意点
「font-family」は、左から順番に実行されます。
なので
表示させたいフォントは、なるべく「左へ寄せて」ください。
＜「font-family」指定例＞
font-family: YuGothic, YuMincho, sans-serif, serif;「font-family」は、
左から実行されます。
１：游ゴシック
２：游明朝
３：総称ファミリー（ゴシック）
４：総称ファミリー（明朝）
この順番で指定すると「游ゴシック」「游明朝」が優先的に表示されます。
もし「游ゴシック」「游明朝」がなかったら
「sans-serif」「serif」の中から適切なフォントが選ばれます。
２：font-size（大きさ）
「font-size」は、
フォントの大きさを指定するプロパティです。
「font-size」の値は２種類です。
１：数値（px emなど）
２：パーセント
パーセントは「親要素のfont-size」に対してのパーセントになります。
font-size: 32px;
font-size: 2em;
font-size: 120%;３：font-weight（太さ）
「font-weight」は、
フォントの太さを設定します。
２通りの指定ができます。
１：数値指定
２：名称指定
「font-weight」の値は「９種類」あります。
数値が大きくなると「文字は太く」なります。
詳しくは、以下の通りです。
| 数値 | 名称 |
| 100 | Thin |
| 200 | Extra Light |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold |
| 700 | Bold |
| 800 | Extra Bold |
| 900 | Black |
「font-weight」は「100〜900」の９種類です。
しかし
日本語は「100〜900」すべてが用意されている訳ではありません。
主に用意されているのは「400」「700」です。
なので
指定するのは「400」「700」
もしくは「normal」「bold」になります。
font-weight: 400;
font-weight: 700;
font-weight: normal;
font-weight: bold;４：font-style（斜体）
「font-style」は、
フォントを斜体にするプロパティです。
斜体は、日本語にとって一般的ではありません。
なので
「italic」「oblique」どちらを指定しても同じ斜体になります。
「font-style」の値は３つあります。
１：normal ＝ 斜体にしない（デフォルト）
２：italic ＝ 斜体
３：oblique ＝ 斜体
font-style: normal;
font-style: italic;
font-style: oblique;まとめ
「font」は、フォントに関わるプロパティです。
１：フォントの種類
２：大きさ
３：斜体
特に「フォントの種類」である「font-family」は重要です。
とはいえ
「font-family」は難しいので
とりあえず
以下の指定を入れておけば「大体なんとか」なります。
font-family: "Yu Gothic", YuGothic, "Yu Mincho", YuMincho, sans-serif, serif;| 左から | ||
| １ | “Yu Gothic” | Windows（游ゴシック） |
| ２ | YuGothic | Mac（游ゴシック） |
| ３ | “Yu Mincho” | Windows（游明朝） |
| ４ | YuMincho | Mac（游ゴシック） |
| ５ | sans-serif | 総称ファミリー（ゴシック） |
| ６ | serif | 総称ファミリー（明朝） |
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
その時は、
「ダブルクオーテーションなどの記号をいったん削除して、打ち直してください」
FontAwesomeを使うなら「font-weight」に注意
「FontAwesome」を使うなら「font-weight」に注意してください。
「Font Awesome（無料版）」は、
font-weightが「400」「900」だけです。
それ以外の値を入れるとアイコンは表示されません。
とにかく
「Font Awesome」は「400、900」と覚えてください。
＜「Font Awesome」とは＞
「Font Awesome」とは、
Dave Gandy氏らが作った「とても便利なアイコン群」です。
ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、とても便利なアイコン群です。
以上
css「font」読みやすさに深く関わるフォントのプロパティ（html,css）
の話でした。
ありがとうございました。