cssプロパティfontの詳しい説明

こんにちは tanaka です。

今回は、
cssプロパティ
font の説明です。

fontは、
使うフォントを決めたり
フォントの大きさ、太さ、形を変える
プロパティです。


プロパティfontの種類は、
6種類 + 一括指定があります。

(1)font-family = 使うフォントを決める
(2)font-size  = 大きさ
(3)font-weight = 太さ
(4)font-style  = 斜体
(5)font-stretch = 引き延ばし
(6)font-variant = 小さく添える

(7)font    = 一括指定


今回は、
(1)font-family = 使うフォント決める
(2)font-size  = 大きさ
(3)font-weight = 太さ
(4)font-style  = 斜体
プロパティの紹介をします。

(5)font-stretch = 引き延ばし
(6)font-variant = 小さく添える
(7)font    = 一括指定
は、省きます。


そのほか
関連のプロパティとして
line-height
があります。

line-heightは、
行間に使われます。

しかし、
cssでは文字の高さ

font-sizeではなく
line-heightで設定した数値になるため

注意が必要です。

画像blog-font02

そのほかfontの関連として
FontAwesome
があります。

そちらは
別に記事を用意しました。

よければご覧ください。

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

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティfontの説明

fontとは

fontは、
使うフォントを決めたり
フォントの大きさ、太さ、形を変える
プロパティです。

プロパティfontは6種 + 一括指定

プロパティfontの種類は、
6種類 + 一括指定があります。

(1)font-family = 使うフォントを決める
(2)font-size  = 大きさ
(3)font-weight = 太さ
(4)font-style  = 斜体
(5)font-stretch = 引き延ばし
(6)font-variant = 小さく添える

(7)font    = 一括指定

今回は、4種類を紹介

今回は、
(1)font-family = 使うフォント
(2)font-size  = 大きさ
(3)font-weight = 太さ
(4)font-style  = 斜体
プロパティの紹介をします。

(1)font-family = 使うフォント

font-familyは、
使うフォントを指定する
プロパティです。

指定方法は、
2種類あります。
 ・フォントの指定
 ・フォントパックの指定

フォントは、
必ずどこかのフォントパックに
所属しています。

フォントと
フォントパックの関係は
以下の通りです。

フォントとフォントパック
フォントの種類所属
フォントパック
游ゴシック
メイリオ
ヒラギノ角ゴシック

など
sans-serif
(ゴシックパック)
游明朝
MS P明朝
ヒラギノ明朝

など
serif
(明朝パック)
主にアルファベット
のため種類は省略
cursive
(筆記体パック)
主にアルファベット
のため種類は省略
fantasy
(装飾系パック)
MSゴシック
MS明朝

など
monospace
(等幅パック)

残念ながらフォントは、
全ての機械に
全てのフォントが
用意されているわけではありません。

Windowsにあるが
Macにない

Macにあるが
Windowsにない

Windows、Macにあるが
iosにない

など、
それぞれあったり
無かったりします。

なので、
このフォントを全ての機械で使いたい
というのはできません。

そのため、
Windowsは
Macは
iosは
と、考える必要があります。
(Androidは、難しいため省きます)

そんなの面倒だ
という方は、
フォントパックを指定してください。

フォントパックは、
機械が自動で

そのフォントパックの中から
適切にフォントを選んで
表示してくれます。

指定方法

font-familyの指定方法には
少し難しいルールがあります。

そのルールは””を
つけるか、つけないかです。

ルールは以下の通りです。

フォントパック””をつけない
スペースが入らない
アルファベットの
フォント名
””をつけない
日本語のフォント名””をつける
スペースが入る
アルファベットの
フォント名
””をつける

難しく感じる場合は、
どこかでコードを見つけて
コピーペーストする方が確実でしょう。

注意)
コピーペーストしたものが
うまく動作しなかった場合、

””の部分だけ
半角で打ち直してください。

より左に指定されたフォント、フォントパックが優先

font-familyは、
より左に書かれたものが
優先で実行されます。

例1
正しいやり方
font-family: "Meiryo", sans-serif;

まず、
メイリオが選ばれます。

しかし、
メイリオのフォントを
機械が持っていなければ
次の
sans-serif(ゴシックパック)が選ばれます。

例2
間違ったやり方
font-family: sans-serif, "Meiryo";

最初にsans-serif(ゴシックパック)が選ばれます。

sans-serif(ゴシックパック)は、
機械にあるフォントを自動で選びます。

それにより
処理はここで終了します。

次のメイリオは、
選ばれることがありません。

(2)font-size  = 大きさ

font-sizeは、
フォントの大きさを指定します。

値は2つあります。
 1:数値(px emなど)
 2:パーセント

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

font-size: 120%;

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

(3)font-weight = 太さ

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

値は2つあります。
 1:数値指定
 2:名称指定

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

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

font-weightの
値は以下の通りです。

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

数値は100単位、
それぞれに名称がついています。

数値が大きくなるにつれ
文字も太くなります。

しかし、
日本語フォントは

font-weight 100〜900の
全てが用意されているわけでは
ないようです。

なので、
font-weightの利用は
特別な理由がない限り

確実に用意されている
 ・400 Normal
 ・700 Bold
だけにした方が良いでしょう。

(4)font-style = 斜体

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

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

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

斜体は、
日本語フォントにとって
一般的でないためか

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

ですので、
font-styleでフォントを斜体にする場合

italic、obliqueの
好きな方を選んでください。

line-heightは、文字の高さとして扱われる

そのほか
関連のプロパティとして
line-height
があります。

このline-heightは、
行間として使われます。

しかし、
cssでは、
文字の高さ
font-sizeではなく
line-heightで設定した数値になるため

注意が必要です。

画像blog-font02

cssプロパティfont-familyの代表的なフォント

sans-serif(ゴシックパック)

游ゴシック(sans-serif)
游ゴシック(ゆうごしっく)

Windows、macどちらにも入っているフォント

・見た目くっきりで読みやすい

・とめ、はね、はらいの端が少し丸くなっているのが特徴

font-family: "Yu Gothic Medium", YuGothic, "Yu Gothic", sans-serif;
メイリオ(sans-serif)
メイリオ

Windows専用

・見た目はっきりの読みやすいフォント

・游ゴシックに似ているが、とめ、はね、はらいが角ばっている

font-family: "Meiryo", sans-serif;
ヒラギノ角ゴシック(sans-serif)
ヒラギノ角ゴシック

Mac、iosで利用可能

・クセがなく読みやすいフォント

・游ゴシックとメイリオの間のようなフォント

font-family: "Hiragino Kaku Gothic ProN", sans-serif;

serif(明朝パック)

游明朝(serif)
游明朝(ゆうみんちょう)

Windows、macどちらにも入っているフォント

・読みやすくキレイ

・明朝特有の美しさもある

font-family: "YuMincho", YuMincho, serif;
MS P明朝(serif)
MS P明朝

Windows専用

・少しきゃしゃなフォント

・明朝特有の細さのせいか?

font-family: "MS P明朝", serif;
ヒラギノ明朝(serif)
ヒラギノ明朝

Mac、iosで利用可能

・はね、はらいが大きくのびやかなフォント

font-family: "Hiragino Mincho ProN", serif;

まとめ

fontとは

fontは、
使うフォントを決めたり
フォントの大きさ、太さ、形を変える
プロパティ。

fontのは、6種+一括指定

プロパティfontの種類は、
6種 + 一括指定があります。

(1)font-family = 使うフォント
(2)font-size  = 大きさ
(3)font-weight = 太さ
(4)font-style  = 斜体
(5)font-stretch = 引き延ばし
(6)font-variant = 小さく添える

(7)font    = 一括指定

font-family

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

sans-serif(ゴシック群)

游ゴシック(Windows、mac)

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

メイリオ(Windows)

font-family: "Meiryo", sans-serif;

ヒラギノ角ゴシック(Mac、ios)

font-family: "Hiragino Kaku Gothic ProN", sans-serif;
serif(明朝群)

游明朝(Windows、mac)

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

MS P明朝(Windows)

font-family: "MS P明朝", serif;

ヒラギノ明朝(Mac、ios)

font-family: "Hiragino Mincho ProN", serif;
font-size

font-sizeは、
フォントの大きさを指定する。

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

パーセントは
親要素のfont-sizeが元となっている。

font-weight

font-weightは、
フォントの太さを設定。

値は2つ。
 1:数値指定
 2:名称指定

特別な理由がない限り
 ・400 Normal
 ・700 Bold
だけ使用した方が良い。

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

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

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

日本語は、
italic、obliqueのどちらを使っても
結果は同じ。

line-height

そのほか
関連のプロパティとして
line-height
がある。

このline-heightは、
主に行間として使われるのだが

cssでは、
文字の高さ
font-sizeではなく
line-heightで設定した数値になるため

注意が必要。

画像blog-font02
FontAwesome

そのほかfontの関連として
FontAwesome
があります。

そちらは
別に記事を用意しました。

よければご覧ください。

以上、
font
の話でした。

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

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