概要
CSSプロパティ「font-weight」は、フォントの太さ(ウエイト)を指定することができます。
<p class="font-bold">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-bold {
font-weight: bold;
}
</style>
値の指定方法
{ font-weight: 値}
数値なども用意されていますが、フォント側が対応していない場合は近い数値に変換されてしまいますので、実際は「normal」と「bold」を使用することが多いでしょう。
値 | 説明 |
---|---|
normal | 通常の太さ。400に相当 |
bold | 太字になる。700に相当 |
数値 | 100,200,...700まで100単位で指定できます。 |
lighter | (指定できるフォントの中で)継承値よりも一段階細く指定できる |
bolder | (指定できるフォントの中で)継承値よりも一段階太く指定できる |
プロパティの種類について
「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。
プロパティ名 | 説明 |
---|---|
font | フォントに関する指定をまとめて行うショートハンドプロパティ |
font-style | フォントのスタイルを指定する |
font-variant | フォントのスモールキャップ指定する |
font-weight | フォントの太さを指定する |
font-size | フォントのサイズを指定する |
font-family | フォントの種類を指定する |
font-size-adjust | フォントのサイズを調整する |
font-stretch | フォントを縦長・横長にする |
<p class="font-normal">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<p class="font-bold">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<p class="font-600">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-normal {
font-weight: normal;
}
.font-bold {
font-weight: bold;
}
.font-600 {
font-weight: 600;
}
</style>
使用例
文章の一部を太字にしたり、見出しを太くする場合に使用する例です。
<p class="bold">今日の天気</p>
<p>今日の東京の天気は<span class="bold">晴れ</span>です</p>
<p>今日の長野の天気は<span class="bold">雨</span>です</p>
<style>
.bold {
font-weight: bold;
}
</style>