CSSでフォントを指定する方法

2020年12月6日2021年3月31日CSS

WebサイトもWebアプリも、画像や動画のちからはあるけども、最も多く使われるのが文字のため、フォントは次第で印象が大きく変化する。

この記事では、CSSでフォントを指定する方法と、フォントの種類をみていきましょう。

目次から読む

font-familyでフォントを指定することができます。

@charset "utf-8";
 h1 {
   font-family: Verdana, 'Arial Black', メイリオ, sans-serif;
 }

フォントを指定するときには、いくつかルールがあるので、みていきましょう。

コンピュータによって入っているフォントが違うことがあるため、複数指定しましょう。 左から順番に指定したフォントが適用されます。

フォント名に空白があるものは、"で囲う必要があります。

メイリオなど日本語名のフォント名をかくときは、文字化けする可能性があるため、先頭に「@charset “utf-8";」を記載します。

日本語フォントを先にかくと、英字にまで反映されるため、それが嫌な場合は英字フォントのあとに書くといいです。

先に書いたフォントがどれも当てはまらない場合のセーフティネットとして、一番最後には総称フォントファミリーを選んでおきます。

総称フォントファミリについて、以下があります。

Posted by devsakaso