css「font」読みやすさに深く関わるフォントのプロパティ(html,css)

画像font100

こんにちは、tanakaです。

今回は「font」プロパティの説明です。

「font」は、読みやすさに深く関わるフォントのプロパティです。

「読みやすいページ」を作るなら知っておいた方が良いでしょう。

しかし

プロパティ「font-family」は、少し難しくあります。

「font-family」が「よく分からなかったな」という方は、

とりあえず、以下の指定を入れておけば「大体なんとか」なります。

font-family: "Yu Gothic", YuGothic, "Yu Mincho", YuMincho, sans-serif, serif;

それでは、
詳しく説明していきます。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

その時は、
「ダブルクオーテーションなどの記号をいったん削除して、打ち直してください」

「font」とは?

「font」は、
「フォント」にまつわるプロパティです。

「フォント」は、
ページを作る上でとても大事なので覚えた方が良いでしょう。

「font」4種類のプロパティと一括指定

「font」には、
4種類のプロパティと一括指定があります。

1:font-family(使うフォントを決める)
2:font-size(大きさ)
3:font-weight(太さ)
4:font-style(斜体)

5:font    = 一括指定

それでは、
詳しく説明していきます。

1:font-family(使うフォントを決める)

「font-family」は、
使うフォントを決めるプロパティです。

「font-family」について話すと、
とても長くなります。

なので

重要な部分だけ説明します。

1:「Windows」と「Mac」のフォント
2:フォントの種類
3:総称ファミリー名
4:「font-family」指定方法
5:「font-family」注意点

それでは、
詳しく説明していきます。

「Windows」と「Mac」のフォント

「font-family」の前に、
フォントを表示する機械について説明します。

今現在、ページを表示する機械は「4つ」あります。

1:Windowsパソコン
2:Macパソコン
3:iphone、iPad(iOS)
4:スマホ、タブレット(Android)

これらの4つに内臓されているフォントは、
全て同じではありません。

機械の種類によっては、
フォントがあったり、無かったりします。

例えば、

Windowsだけメイリオ、MS P
Mac、iOSだけヒラギノ
Windows、Mac両方游ゴシック、游明朝

このように機械、OSによって持っているフォントは違います。

ちなみにAndroidのフォントは、
よくわかりません。

フォントがなかったら「とりあえず機種依存文字で表示」

それでは、
指定したフォントがその機械になかったら
何も表示されないのでしょうか?

そんなことはありません。

「機械にないフォントを指定した」
「指定したフォントが無かった」

このような場合は、
とりあえず機械が持っているフォント(機種依存文字)で表示します。

なので

何か文字は出てくる仕組みになっています。(とても珍しい外国の文字でない限り)

フォントの種類

フォントは、たくさんの種類があります。

全て紹介できません。

なので

今回は、有名なフォントを紹介します。

ゴシック体

1:游ゴシック(Windows、Mac)
2:メイリオ(Windows)
3:ヒラギノ角ゴシック(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)

1:游明朝(Windows、Mac)
2:MS P明朝(Windows)
3:ヒラギノ明朝(Mac、ios)

<游明朝(ゆうみんちょう)>

游ゴシックは「Windows、Macどちらにも入っている」フォントです。

明朝特有の美しさがあり、読みやすくキレイ。

詳しくは「ゆうみんちょう」で検索してください。

font-family: "Yu Mincho", YuMincho, serif;

<MS P明朝>

MS P明朝は「Windows専用」フォントです。

きゃしゃなフォントです。

詳しくは「MS明朝」で検索してください。

font-family: "MS P明朝", 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」は、
左から実行されます。

1:游ゴシック
2:游明朝
3:総称ファミリー(ゴシック)
4:総称ファミリー(明朝)

この順番で指定すると「游ゴシック」「游明朝」が優先的に表示されます。

もし「游ゴシック」「游明朝」がなかったら
「sans-serif」「serif」の中から適切なフォントが選ばれます。

2:font-size(大きさ)

「font-size」は、
フォントの大きさを指定するプロパティです。

「font-size」の値は2種類です。

 1:数値(px emなど)
 2:パーセント

パーセントは「親要素のfont-size」に対してのパーセントになります。

font-size: 32px;
font-size: 2em;

font-size: 120%;

3:font-weight(太さ)

「font-weight」は、
フォントの太さを設定します。

2通りの指定ができます。

 1:数値指定
 2:名称指定

「font-weight」の値は「9種類」あります。

数値が大きくなると「文字は太く」なります。

詳しくは、以下の通りです。

数値名称
100Thin
200Extra Light
300Light
400Normal
500Medium
600Semi Bold
700Bold
800Extra Bold
900Black

「font-weight」は「100〜900」の9種類です。

しかし

日本語は「100〜900」すべてが用意されている訳ではありません。

主に用意されているのは「400」「700」です。

なので

指定するのは「400」「700」
もしくは「normal」「bold」になります。

font-weight: 400;
font-weight: 700;

font-weight: normal;
font-weight: bold;

4:font-style(斜体)

「font-style」は、
フォントを斜体にするプロパティです。

斜体は、日本語にとって一般的ではありません。

なので

「italic」「oblique」どちらを指定しても同じ斜体になります。

「font-style」の値は3つあります。

 1:normal = 斜体にしない(デフォルト)
 2:italic  = 斜体
 3:oblique = 斜体

font-style: normal;
font-style: italic;
font-style: oblique;

まとめ

「font」は、フォントに関わるプロパティです。

1:フォントの種類
2:大きさ
3:斜体

特に「フォントの種類」である「font-family」は重要です。

とはいえ

「font-family」は難しいので

とりあえず

以下の指定を入れておけば「大体なんとか」なります。

font-family: "Yu Gothic", YuGothic, "Yu Mincho", YuMincho, sans-serif, serif;
左から
“Yu Gothic”Windows(游ゴシック)
YuGothicMac(游ゴシック)
“Yu Mincho”Windows(游明朝)
YuMinchoMac(游ゴシック)
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氏らが作った「とても便利なアイコン群」です。

画像blog-what-is-font-fontawesome01

ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、とても便利なアイコン群です。

以上
css「font」読みやすさに深く関わるフォントのプロパティ(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました