webデザイン独学【無料】文字の書体を指定するCSS

フォントの種類を指定するスタイルは「font-family」です。WindowsやMac、AndroidスマートフォンやiPhoneで表示する際に、問題なく文字が表示できるように設定します。その場合に標準でインストールされているフォントを指定することが一般的です。ゴシック体や明朝体など書体が変わるだけで文章の雰囲気も変わります。ここではfont-familyについて具体的な記述の書き方を説明します。

こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ

webデザイン独学【無料】文字の書体を指定するCSS｜font-family

font-family
font-familyの記述例。
WindowsとMacintoshで標準にインストールされているフォント。
日本語文字と半角英数文字について。
ブラウザの読み込む順番について。
まとめ

フォントの種類ってどれくらいあるんだろう？

サイトの雰囲気に合わせて、ゴシック体や明朝体を選択することも必要ね！

font-family

	値	内容
font-family	日本語名のフォント	“ＭＳゴシック”や”Osaka”など、決められたフォント名を表示します。
	serif	明朝系のフォントで表示します。
	sans-serif	ゴシック系のフォントで表示します。
	cursive	筆記体、草書体系のフォントで表示します。
	fantasy	装飾系のフォントで表示します。
	monospace	等幅のフォントで表示します。

font-familyの記述例。

p{
font-family:"ＭＳゴシック","Osaka";
}

pタグの文章に「font-family」を適用した例です。「ＭＳゴシック」と「Osaka」と書いた記述が確認できると思います。この２つはどちらもゴシック体の指定です。

ＭＳゴシックは、Windowsに標準でインストールされているゴシック体。Osakaは、Macに標準でインストールされているゴシック体です。

このように指定することで、WindowsとMacどちらで閲覧しても、pタグで書いた文章はゴシック体で表示できます。

スマートフォンの指定について

※ iPhoneはApple社なのでMacと同じフォントの指定です。Android含め、WindowsとMacの２つを対応をすることでスマートフォンやタブレットも対応できているという認識で大丈夫です。

WindowsとMacintoshで標準にインストールされているフォント。

OS	フォント	内容
Windows	メイリオ	Windowsに標準でインストールされているゴシック体のフォントです。
	ＭＳゴシック	Windowsに標準でインストールされているゴシック体の等幅フォントです。MSは全角、ゴシックとの間に半角スペース挿入。
	ＭＳＰゴシック	Windowsに標準でインストールされているゴシック体のプロポーショナルフォントです。MSとPは全角、MSとPとの間に半角スペース挿入。
	ＭＳ明朝	Windowsに標準でインストールされている明朝体の等幅フォントです。MSは全角、明朝との間に半角スペース挿入。
	ＭＳＰ明朝	Windowsに標準でインストールされている明朝体のプロポーショナルフォントです。MSとPは全角、MSとPとの間に半角スペース挿入。
	Arial	Windowsに標準でインストールされているゴシック体の欧文フォントです。

OS	フォント	内容
Mac	ヒラギノ角ゴ Pro W3	Macintosh OS X以降に標準でインストールされているゴシック体のフォントです。
	ヒラギノ明朝 Pro W3	Macintosh OS X以降に標準でインストールされている明朝体のフォントです。
	Osaka	Macintosh OS X以前に標準でインストールされているゴシック体のフォントです。
	細明朝体	Macintosh OS X以前に標準でインストールされている明朝体のフォントです。
	Helvetica	Macintoshに標準でインストールされているゴシック体の欧文フォントです。