CSSでフォントを指定する - nicepaper @ ウィキ

フォントに時々悩まされます。そんな中でテンプレート的なものを作っていきたいと思います。今回はwindowsOS8.1で行いました。7月28日記事

目次

基本形
フォントカテゴリ5種類
コード
ブラウザ間テスト（すべてWindows8.1）
まとめ
参考

基本形

font-family: "あるフォント1","あるフォント2","あるフォント3","あるフォント4",総称（フォントカテゴリ）;

例：ゴシック系の場合

font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

左にいけばいくほどブラウザの採用優先度があがります。そして、最後にフォントのカテゴリを記述するのが一般的です。最後はダブルクオーテーションはいりません。

フォントカテゴリ5種類

ゴシック体風のsans-serif、明朝体風のserif、手書き風cursive、等幅フォントタイプライター風のmonospace、装飾体風のfantasyがあります。一番右側にダブルクオーテーションなしで指定します。

コード

今回はフォントカテゴリのみを指定してどうなるかを見てみます。
HTML

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>フォント</title>
</head>
<body>
<dl>
	<dt>デフォルト<br>指定なし</dt><dd>abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>
	<dt class="like_gothic">ゴシック風<br>sans-serif</dt><dd class="like_gothic">abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>
	<dt class="like_mincho">明朝風<br>serif</dt><dd class="like_mincho">abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>
	<dt class="like_handwriting">手書き風<br>cursive</dt><dd class="like_handwriting">abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>	
	<dt class="like_typewriter">等幅フォント<br>タイプライター風<br>monospace</dt><dd class="like_typewriter">abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>	
	<dt class="like_decoration">装飾風<br>fantasy</dt><dd class="like_decoration">abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>0123456789<br>日本語の表記はカタカナとひらがなと漢字</dd>
</dl>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
dt{
	float:left;
	clear:both;
	width: 200px;
	padding: 5px;
	font-size: 20px;
}
dd{
	width: 800px;
	float:left;
	padding: 5px;
	font-size: 25px;
}
.like_gothic{
	font-family: sans-serif;
}
.like_mincho{
	font-family: serif;
}
.like_handwriting{
	font-family: cursive;
}
.like_typewriter{
	font-family: monospace;
}
.like_decoration{
	font-family: fantasy;
}