font-family - フォントの指定

更新:

CSSのfont-familyは、メイリオや游ゴシック体など、ウェブページで表示するフォント(書体)を指定できるプロパティ。 もし何も指定しない場合は、OSやブラウザの既定フォントで表示される。

基本

font-familyの後に続けてフォント名を記述する。

記述例
font-family:Meiryo, sans-serif;

主なルールは以下の通り。

  • フォント名は複数指定可能。その際、カンマで区切って記す。
  • 複数指定した場合、先に記したものから順に、ユーザーのコンピュータに存在するフォントが適用される。
  • ユーザーのコンピュータに存在しないフォントは無効となる。
  • フォント名にスペース(空白)を含む場合は、シングルまたはダブルクオーテーションで囲む。

代表的なフォント

サイトで使われている代表的なフォントには以下のようなものがある。

Meiryo(メイリオ)
Windows Vista以降に搭載された。ゴシック体のみで明朝体はない。2020年現在、Windows環境では多くのサイトがMeiryoで表示される。MS Pゴシックに見慣れている時代にはやや見にくい印象があったが、現在は見慣れてしまった。MacでもMicrosoft Officeなどをインストールしている場合は表示可能。
游ゴシック体
Windows 8.1、Mac OS X Mavericks以降に搭載された。Windowsでは「游ゴシック」または「Yu Gothic」、Macでは「游ゴシック体」または「YuGothic」を指定する。
游明朝体
Windows 8.1、Mac OS X Mavericks以降に搭載された。Windowsでは「游明朝」または「Yu Mincho」、Macでは「游明朝体」または「YuMincho」を指定する。
MS Pゴシック(MS PGothic)
Windows 95以降に搭載されたゴシック体。従来は既定値になっていたブラウザも多かったが、2020年現在はMeiryoが既定値になっているブラウザが多い。
MS P明朝(MS PMincho)
Windows 95以降に搭載された明朝体。
Arial
欧文フォント。サンセリフ書体。WindowsやMacに標準搭載。見やすさの観点から、英数字の表示に使用している人もいる。
ヒラギノ角ゴ ProN(Hiragino Kaku Gothic ProN)
Mac OS X v10.5 Leopard以降に搭載された。ヒラギノ系はMacで一般的なフォントで、iOSにも搭載されている。
serif
ユーザーのコンピュータに存在する既定の明朝体が表示される。
sans-serif
ユーザーのコンピュータに存在する既定のゴシック体が表示される。

注意点

游ゴシック体または游明朝体を指定する場合、WindowsとMacで名称が異なる点に注意する。 具体的には文字列におけるスペース(空白)の有無、末尾の「体」の有無が異なる。

Mac

MacやiOSはどのフォントでも比較的見やすいので、個人的にはserifまたはsans-serifのみ指定すれば良いと感じている。

ゴシック体を使う場合

游ゴシック体は新しく、見た目は綺麗だが、Windowsではフォントの線が細く、やや見にくい。 見慣れていて、線も太めのメイリオを使用するのが無難かもしれない。 ただし、以下のように記述すると線を太くすることもできる。

font-family:'Yu Gothic Medium', sans-serif;

Mediumは標準より太く、Boldより細い。

逆に細くしたい場合は以下のように書く。

font-family:'Yu Gothic Light', sans-serif;

また、font-weightプロパティで太さを指定しても良い。

font-family:'Yu Gothic', sans-serif;
font-weight:500;

数値は400が標準。

明朝体を使う場合

サイトのアクセントとして明朝体を使用したい場合もある。 ただ、Androidでは明朝体が表示されないという問題がある。 もし、すべての環境で明朝体を表示したい場合は、ウェブフォントを使用する方法がある。

自分で用意しても良いが、Googleのサービスを利用するのが一番楽。 ここではNoto Serif JPを使う例を記す。

  • まず、Google Fontsにアクセスする。
  • 検索ボックスに「Noto Serif JP」を入力する。
  • 「+」ボタンをクリックすると、ウィンドウ下部に別ウィンドウが表示される。
  • 「customize」タブをクリックし、「Japanese」にチェックを入れる。
  • 「embed」タブの「STANDARD」にあるタグをサイトの<head>領域に貼る。
  • サイトのCSSのfont-familyプロパティに「Noto Serif JP」を指定する。

タグ
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap&subset=japanese" rel="stylesheet">

CSS
font-family:'Noto Serif JP', serif;

lang="ja"の有無

<html> を <html lang="ja"> と書くと、環境によってはバックスラッシュが円マーク(¥)として表示されることがある。 環境というのは、OSやブラウザの種類のほか、サイトで指定したフォントの種類や文字コードなど。 これ以外にも表示に影響が出る文字がある可能性もある。

このエントリーをはてなブックマークに追加