フォント名の指定方法
今回はフォント名の指定の仕方について勉強しました。前回の記事では総称フォントについて投稿しましたが、コールバックフォントとの違いについても解説します。
コードの書き方
フォント名の指定方法は以下の通りです
.class_name{
font-family:"メイリオ",sans-serif;
セレクターを指定しその後フォントスタックを記述します。フォントが使えない場合はコールバックフォントを指定します。
以下が今回制作したコードになります。
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<p class ="font_1">MSPゴシックです。MS PGothicです<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.
</p>
<p class ="font_2">MS 明朝です。MS Minchoです
<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.
</p>
<p class ="font_3">Osakaです。Osakadesu。
<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.
</p>
<p class ="font_4">メイリオです。Meiryoです。
<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.
</p>
<p class ="font_5">Arialは英語表記用のフォントです。cssには英語のフォントから先に記述しましょう。<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.</p>
<p class ="font_6">Arialは英語表記用のフォントです。cssには英語のフォントから先に記述しましょう。<br>
Arial is a font intended for English text. In CSS, we should specify English fonts first.</p>
</body>
</html>
style.css
font_1{
font-family: "MSPゴシック","MS PGothic",sans-serif;
}
.font_2{
font-family: "MS 明朝","MS Mincho",sans-serif;
}
.font_3{
font-family: Osaka,sans-serif;
}
.font_4{
font-family: "メイリオ","Meiryo",sans-serif;
}
.font_5{
font-family: Arial, "メイリオ" , sans-serif;
}
.font_6{
font-family: "メイリオ",Arial,sans-serif;
}
日本語名または英語名のフォントを指定し、フォールバックフォントを用いることで、異なる環境でも表示の一貫性を確保できます。
コードをコピペして試してもらうとわかるのですがアルファベットの表記は全角表示になってしまいます。
6番目の問題は、CSSのフォントスタックに起因しています。フォントは左から順に適用されるため、最初にメイリオを指定すると、アルファベットが全角で表示されてしまいます。
この問題の対策としてまず最初に、アルファベット用のフォントを指定しその後に日本語フォントとコールバックフォントを記述することでアルファベットを半角で表示することができます。
以下が改善したcssの記述です。英語フォントに今回はArialを指定しました。
style.css
.font_1{
font-family: Arial, "MSPゴシック","MS PGothic",sans-serif;
}
.font_2{
font-family: Arial,"MS 明朝","MS Mincho",sans-serif;
}
.font_3{
font-family: Arial,Osaka,sans-serif;
}
.font_4{
font-family: Arial,"メイリオ","Meiryo",sans-serif;
}
.font_5 {
font-family: Arial, sans-serif, "メイリオ";
}
.font_6{
font-family: "メイリオ",Arial,sans-serif;
}
わかりやすいように6行目はそのまま全角で英文を表示しています。
総称フォントとコールバックフォントの違いを簡潔に
-
総称フォント
フォントを表すカテゴリ名のこと。フォント名ではなくスタイルの種類を指定することでブラウザが適切なフォントを選択する。 -
コールバックフォント
フォントスタックの一部として記述する。特定のフォントが使えいない場合、最後に記述することで総称フォントが保険として機能する。
その時使われるフォントをコールバックフォントと言う。
これを使うことでフォントの表示の一貫性を保つことができる。