トップページ > スタイルシートリファレンス > font-weight

★スタイルシートリファレンス

font-weight …… フォントの太さを指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

font-weightプロパティは、フォントの太さを指定する際に使用します。 9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、 フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。

■値

数値で指定
100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。
キーワードで指定
normal …… 標準の太さです。(数値で400を指定した場合と同じ)
bold …… 一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

span.sample1 {font-weight: normal; }
span.sample2 {font-weight: bold; }
span.sample3 {font-weight: lighter; }
span.sample4 {font-weight: bolder; }
span.sample100 {font-weight: 100; }
span.sample200 {font-weight: 200; }
span.sample300 {font-weight: 300; }
span.sample400 {font-weight: 400; }
span.sample500 {font-weight: 500; }
span.sample600 {font-weight: 600; }
span.sample700 {font-weight: 700; }
span.sample800 {font-weight: 800; }
span.sample900 {font-weight: 900; }

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<span class="sample1">標準の太さ(400と同じ)</span><br>
<span class="sample2">一般的な太字(700と同じ)</span><br>
<span class="sample3">相対的に一段階細く</span><br>
<span class="sample4">相対的に一段階太く</span><br>
<span class="sample100">太さ100</span><br>
<span class="sample200">太さ200</span><br>
<span class="sample300">太さ300</span><br>
<span class="sample400">太さ400</span><br>
<span class="sample500">太さ500</span><br>
<span class="sample600">太さ600</span><br>
<span class="sample700">太さ700</span><br>
<span class="sample800">太さ800</span><br>
<span class="sample900">太さ900</span>
</body>
</html>
↓↓↓

ブラウザ上の表示

標準の太さ(400と同じ)
一般的な太字(700と同じ)
相対的に一段階細く
相対的に一段階太く
太さ100
太さ200
太さ300
太さ400
太さ500
太さ600
太さ700
太さ800
太さ900

■関連項目

font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ