CSSでフォントを指定する方法
WebサイトもWebアプリも、画像や動画のちからはあるけども、最も多く使われるのが文字のため、フォントは次第で印象が大きく変化する。
この記事では、CSSでフォントを指定する方法と、フォントの種類をみていきましょう。
CSSでフォントを指定する方法
font-familyでフォントを指定することができます。
@charset "utf-8";
h1 {
font-family: Verdana, 'Arial Black', メイリオ, sans-serif;
}フォントを指定するときには、いくつかルールがあるので、みていきましょう。
フォントを指定するときのルール
コンピュータによって入っているフォントが違うことがあるため、複数指定しましょう。 左から順番に指定したフォントが適用されます。
フォント名に空白があるものは、"で囲う必要があります。
メイリオなど日本語名のフォント名をかくときは、文字化けする可能性があるため、先頭に「@charset “utf-8";」を記載します。
日本語フォントを先にかくと、英字にまで反映されるため、それが嫌な場合は英字フォントのあとに書くといいです。
先に書いたフォントがどれも当てはまらない場合のセーフティネットとして、一番最後には総称フォントファミリーを選んでおきます。
総称フォントファミリ
総称フォントファミリについて、以下があります。
- sans-serif ゴシック体
- serif 明朝体
- cursive 筆記体
- monospace 等幅フォント