※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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

目次





基本形

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

例:ゴシック系の場合

font-family: "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "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;
}



ブラウザ間テスト(すべてWindows8.1)

IE(11.0)

fantasyのfont-familyが突き抜けてしまいますがご了承ください。

Chrome(44.0)

Firefox(39.0)

Opera(30.0)

縮小version

IE Chrome
Firefox Opera

考察:
firefoxはフォント(特に手書き風フォントcursive)に弱いです。
IEは装飾系フォントfantasyは右方向に広がる
ChromeとOperaは同じ?

まとめ

ブラウザ間で見え方が違うことと、文字の長さが違くなる場合もあります。

参考

http://msugai.fc2web.com/web/app/font.html http://masaboo.cside.com/new_css1/cs_15.htm

以上