「CSSでフォントを指定する」の編集履歴（バックアップ）一覧に戻る
CSSでフォントを指定する - (2015/07/28 (火) 12:23:11) のソース
フォントに時々悩まされます。そんな中でテンプレート的なものを作っていきたいと思います。今回はwindowsOS8.1で行いました。7月28日記事
~
~
目次
#contents
~
~
----
~
*基本形
font-family: "あるフォント1","あるフォント2","あるフォント3","あるフォント4",総称（フォントカテゴリ）;
例：ゴシック系の場合
font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
左にいけばいくほどブラウザの採用優先度があがります。そして、最後にフォントのカテゴリを記述するのが一般的です。最後は&color(red){ダブルクオーテーションはいりません。}
~
~
*フォントカテゴリ5種類
ゴシック体風のsans-serif、明朝体風のserif、手書き風cursive、等幅フォントタイプライター風のmonospace、装飾体風のfantasyがあります。
一番右側にダブルクオーテーションなしで指定します。
~
~
*コード
今回は&color(red){フォントカテゴリのみを指定}してどうなるかを見てみます。
~
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)
&color(red){fantasyのfont-familyが突き抜けてしまいますがご了承ください。}
#image(IE.jpg)
**Chrome(44.0)
#image(chrome.jpg)
**Firefox(39.0)
#image(firefox.jpg)
**Opera(30.0)
#image(opera.jpg)
**縮小version
|IE|Chrome|
|#image(width=300,IE.jpg)|#image(width=300,chrome.jpg)|
|Firefox|Opera|
|#image(width=300,firefox.jpg)|#image(width=300,opera.jpg)|
考察:~
firefoxはフォント（特に手書き風フォントcursive）に弱いです。~
IEは装飾系フォントfantasyは右方向に広がる~
ChromeとOperaは同じ？
~
~
*まとめ
ブラウザ間で見え方が違うことと、文字の長さが違くなる場合もあります。
~
~
*参考
http://msugai.fc2web.com/web/app/font.html
http://masaboo.cside.com/new_css1/cs_15.htm
~
~
以上
