文字の太さを変えるには「font-weightプロパティ」で指定します。値は数値で指定することも出来ますが、通常はキーワードで指定する方が一般的です。実際に表示される文字の太さは、現在使用されている「font-family」に依存する場合があり、太さのバリエーションが用意されていないフォントでは適用されません。
Contents
キーワードによる主な値と指定方法
キーワードで指定する主な値は「normal（標準）」「bold（太字）」「lighter（相対的細字）」「bolder（相対的太字）」です。
normal
標準の文字の太さで、数値で指定する場合の「400」と同じ。
標準の文字の太さで、数値で指定する場合の「400」と同じ。
bold
太字の文字で、数値で指定する場合の「700」と同じ。
太字の文字で、数値で指定する場合の「700」と同じ。
lighter
文字の太さが親要素よりも相対的に一段細くなります。
文字の太さが親要素よりも相対的に一段細くなります。
bolder
文字の太さが親要素よりも相対的に一段太くなります。
文字の太さが親要素よりも相対的に一段太くなります。
相対的な太さ（「lighter」「bolder」）を使用した場合は「font-family」で多くの太さのバリエーションがあっても、「 thin (100)」「 normal (400)」「 bold (700)」「 heavy (900)」 の4つの太さのみが継承値として計算されます。
＜キーワード指定のCSS構文＞
/* キーワード値 */
font-weight: normal;
font-weight: bold;
/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;例）「bold（太字）」を使った表示例
＜HTML＞
<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>フォントサイズの変更</title> <meta name="description"content="フォントの大きさと太さを変更する"/> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="test-font-frame"> 標準文字の表示 <div class="test-font"> 太文字の表示 </div> </div> </body> </html>
＜CSS＞
@charset "UTF-8";
body {
}
html {
font-size: 20px:
}
.test-font-frame {
font-weight: normal;
}
.test-font {
font-weight: bold;
}
＜表示＞
数値による主な値と指定方法
文字の太さを「数字」で指定することが出来ます。一般的には「100」「200」「300」「400」「500」「600」「700」「800」「900」「950」とフォントが持っている特定の太さを指定します。
“TrueType” や “OpenType”の可変フォントと呼ばれ、1～1000の任意の数字で指定することが出来ます。（CSS Fonts レベル4から導入）
＜数値指定のCSS構文＞
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;
数値「400」が標準文字（キーワード：normal)で、「700」が太文字（キーワード：bold）と同じです。従って「font-weight: bold;」を「font-weight: 700;」としても同じ表示になります。