目次 | font-familyとは |
文字のフォントを指定する |
font-familyとは
font-familyは、フォントを指定します。
書き方 | font-family : 値1(フォントファミリー名) , 値2(総称フォントファミリー名) |
仕様 | 例:font-family: "メイリオ",Meiryo,"MS PGothic",Arial,sans-serif; 複数のフォントをカンマ区切りで指定できます。 ブラウザは、左に書かれたフォントから見ていき、ユーザーの環境に指定のフォントがあればそれが使用されます。 |
・指定のフォントが自分の環境(例:Mac)になければ表示できません。 ・環境によって入っているフォントの種類は違います。 ・英語フォントがある場合は先に書き、次に日本語フォントを書きます。 ・英語の箇所は英語フォントで表示され、日本語の箇所は日本語フォントで表示されます。 ・フォントの名称にスペースがある場合はダブルコーテーションまたはシングルコーテーションで囲みます。例:"MS Pゴシック" |
|
値1(フォントファミリー名) | メイリオなど種類は複数あります。 |
値2(総称フォントファミリー名) | 総称フォントファミリー名は、フォントファミリー名が使用できない時に使用されます。 複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。ユーザーの環境に指定のフォントがあればそれが使用されます。 |
serif・・・明朝系に相当します。 | |
sans-serif・・・ゴシック系に相当します。 | |
monospace・・・等幅のフォントです。 | |
cursive・・・筆記体・草書体に相当します。 | |
fantasy・・・装飾されたフォントです。 | |
初期値 | 環境による |
継承 | 継承する |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/font-family |
文字のフォントを指定する
<style>
.p1 {
font-family: "メイリオ";
}
.p2 {
font-family: serif;/* 明朝系に相当 */
}
.p3 {
font-family: sans-serif;/* ゴシック系に相当 */
}
.p4 {
font-family: monospace;/* 等幅のフォント */
}
.p5 {
font-family: cursive;/* 筆記体・草書体に相当 */
}
.p6 {
font-family: fantasy;/* 装飾されたフォント */
}
p {font-size: 24px;}
</style>
<p class="p1">1.あいうえお-メイリオ</p>
<p class="p2">2.かきくけこ-serif-明朝系</p>
<p class="p3">3.さしすせそ-sans-serif-ゴシック系</p>
<p class="p4">4.たちつてと-monospace-等幅</p>
<p class="p5">5.なにぬねの-cursive-筆記体・草書体</p>
<p class="p6">6.はひふへほ-fantasy-装飾</p>
以下は、実行結果です。
関連の記事
CSS color 文字の色を指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS vertical-align 垂直の位置を指定するサンプル
CSS line-height 行の高さを指定するサンプル