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

2020年12月6日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　等幅フォント

CSS

Posted by devsakaso