スタイルシート(CSS)でフォントの太さを指定する

スタイルシート(CSS)でフォントの太さを指定するスタイルシート(CSS)でフォントの太さを指定する表示例

数値
100、200、300、400、500、600、700、800、900の数値で指定します。標準の太さが「400」です。すべてのフォントがこの太さを揃えているわけではなく、ブラウザによっても解釈が異なります。
normal
標準の太さのフォント「400」と同じです。
bold
太字のフォント「700」と同じです。
bolder,lighter
現在のフォントよりも一段階(数値で100)太い、または細いフォントを表示します。

表示例をごらんいただくと判りますが、日本語フォントの場合は、「bold」、「normal」の2つを使うことが一般的でしょう。

HTML/XHTML

<p>これが標準のフォントです。</p>
<p class="f100">これはフォントの太さ100です。</p>
<p class="f200">これはフォントの太さ200です。</p>
<p class="f300">これはフォントの太さ300です。</p>
<p class="f400">これはフォントの太さ400です。</p>
<p class="f500">これはフォントの太さ500です。</p>
<p class="f600">これはフォントの太さ600です。</p>
<p class="f700">これはフォントの太さ700です。</p>
<p class="f800">これはフォントの太さ800です。</p>
<p class="f900">これはフォントの太さ900です。</p>
<p class="normal">これはフォントの太さnormalです。</p>
<p class="bold">これはフォントの太さboldです。</p>
<p class="bolder">これはフォントの太さbolderです。</p>
<p class="lighter">これはフォントの太さlighterです。</p>

CSS

<style type="text/css">
<!--
.f100 { font-weight: 100; }
.f200 { font-weight: 200; }
.f300 { font-weight: 300; }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }
.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.f900 { font-weight: 900; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.lighter { font-weight: lighter; }
-->
</style>

スタイルシート(CSS)でフォントの太さを指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録