font-weight 「フォントの太さ」

font-weightは、フォント太さを指定することができます。
ただし、使用するフォントにより利用できる（有効な）太さは異なります。

CSS Ver.	適用要素	継承
2.1	全て	する

font の値

【構文】

font-weight : [文字の太さ];

font-weight [フォント情報をまとめて指定]　( サンプル )
font-weight: normal;	標準の太さを設定する（数値指定の"400"に該当する）
font-weight: bold;	太字を設定する（数値指定の"700"に該当する）
font-weight: lighter;	適用中より1段下の細くする（数値指定の"100"細くする）
font-weight: bolder;	適用中より1段下の太くする（数値指定の"100"太くする）
font-weight: 100; ～ font-weight: 900;	"100"（細い）～"900"（太い）の100単位でふと他を数値で指定する
【注意！】使用する（適用される）フォントがにより「font-weight」が効かない場合があります。多くのフォントで「500以下」（標準の太さ）と「700」以上（太字）の2つしか効きません。フリーのフォントを使用する場合などは「太字」でも効かないことがあります。

ページTOP

font-weight のサンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>font指定サンプル</title>
</head>
<body>
<div style="font-weight: normal;">abcABC123_normal</div>
<div style="font-weight: bold;">abcABC123_bold</div>
<div style="font-weight: lighter;">abcABC123_lighter</div>
<div style="font-weight: bolder;">abcABC123_bolder</div>
<div style="font-weight: 100;">abcABC123_100</div>
<div style="font-weight: 200;">abcABC123_200</div>
<div style="font-weight: 300;">abcABC123_300</div>
<div style="font-weight: 400;">abcABC123_400</div>
<div style="font-weight: 500;">abcABC123_500</div>
<div style="font-weight: 600;">abcABC123_600</div>
<div style="font-weight: 700;">abcABC123_700</div>
<div style="font-weight: 800;">abcABC123_800</div>
<div style="font-weight: 900;">abcABC123_900</div>
</body>
</html>

ほぼすべての方で、上記は指定した太さが無視され「標準」と「太字」の2種類で表示されていると思います。
ほとんどのフォントは「標準」「太字」しか保有していないため、太さを細かく指定しても正しく表示されません。
（フォント種類を指定していないため、各ブラウザの標準フォントが使用されます）

次のサンプルはgoogleのフリーフォント「Raleway」をWEBフォントで指定しています。WEBフォント
「Raleway」フォントは「100」～「900」までの太さを保有しているため正しく表示されます。（WEBフォントに対応していないブラウザは正しく表示されません）


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>font指定サンプル</title>
<style type="text/css">
<!--
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Thin.ttf');
     font-weight: 100;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-ExtraLight.ttf');
     font-weight: 200;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Light.ttf');
     font-weight: 300;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Regular.ttf');
     font-weight: 400;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Medium.ttf');
     font-weight: 500;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-SemiBold.ttf');
     font-weight: 600;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Bold.ttf');
     font-weight: 700;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-ExtraBold.ttf');
     font-weight: 800;
}
@font-face {
     font-family: 'testfont';
     src: url('./font/Raleway-Black.ttf');
     font-weight: 900;
}
div {
     font-family: 'testfont';
}
-->
</style>
</head>
<body>
<div style="font-weight: normal;">abcABC123_normal</div>
<div style="font-weight: bold;">abcABC123_bold</div>
<div style="font-weight: lighter;">abcABC123_lighter</div>
<div style="font-weight: bolder;">abcABC123_bolder</div>
<div style="font-weight: 100;">abcABC123_100</div>
<div style="font-weight: 200;">abcABC123_200</div>
<div style="font-weight: 300;">abcABC123_300</div>
<div style="font-weight: 400;">abcABC123_400</div>
<div style="font-weight: 500;">abcABC123_500</div>
<div style="font-weight: 600;">abcABC123_600</div>
<div style="font-weight: 700;">abcABC123_700</div>
<div style="font-weight: 800;">abcABC123_800</div>
<div style="font-weight: 900;">abcABC123_900</div>
</body>
</html>

ページTOP font-sizeフォントのサイズを指定 font-familyフォントの種類を指定 line-height1行の高さを指定 @font-faceWebフォントの利用

ページTOP -->

関連するCSS(STYLE)
font	文字のデザイン
font-family	フォント
font-feature-settings	OpenTypeフォントの字形の切替え
font-kerning	字間スペース
font-language-override	言語を一時的に変更
font-size	文字の大きさ
font-size-adjust	文字サイズの自動調節
font-stretch	フォントの形状（幅広・幅狭）
font-style	斜体のスタイル
font-synthesis	太字や斜体を持たないフォントの表示方法
font-variant	フォントの変換ルール
font-variant-alternates	代替文字の置き換え指定
font-variant-caps	英大文字での表示制御
font-variant-east-asian	漢字の表示指定
font-variant-ligatures	合字の制御指定
font-variant-numeric	数値の表示形式指定
font-variant-position	上付き文字・下付き文字の指定