「CSSでフォントを指定する」の編集履歴(バックアップ)一覧はこちら

CSSでフォントを指定する」(2015/07/28 (火) 12:23:11) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

フォントに時々悩まされます。そんな中でテンプレート的なものを作っていきたいと思います。今回はwindowsOS8.1で行いました。7月28日記事 ~ ~ 目次 #contents ~ ~ ---- ~ *基本形 font-family: "あるフォント1","あるフォント2","あるフォント3","あるフォント4",総称(フォントカテゴリ); 例:ゴシック系の場合 font-family: "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "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は右方向に広がる~ ~ ~ *まとめ ブラウザ間で見え方が違うことと、文字の長さが違くなる場合もあります。 ~ ~ *参考 http://msugai.fc2web.com/web/app/font.html http://masaboo.cside.com/new_css1/cs_15.htm ~ ~ 以上
フォントに時々悩まされます。そんな中でテンプレート的なものを作っていきたいと思います。今回はwindowsOS8.1で行いました。7月28日記事 ~ ~ 目次 #contents ~ ~ ---- ~ *基本形 font-family: "あるフォント1","あるフォント2","あるフォント3","あるフォント4",総称(フォントカテゴリ); 例:ゴシック系の場合 font-family: "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "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 ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: