CSSで文字の太さを変更する「 font-weight 」の設定と使用例

font-weight プロパティは、フォントの太さ（ウェイト）を指定します。

font-weight の使用例

特定の値を指定指定する


p {
   font-weight: bold; /* 太字のフォント */
}

p {

font-weight: bold; /* 太字のフォント */

}

「100」「200」「300」「400」「500」「600」「700」「800」「900」


h1 {
   font-weight: 700; /* 太字 (通常、400が標準で、700が太字) */
}

h1 {

font-weight: 700; /* 太字 (通常、400が標準で、700が太字) */

}


h2 {
   font-weight: lighter; /* より軽いフォント */
}

h2 {

font-weight: lighter; /* より軽いフォント */

}


.parent {
   font-weight: bold;
}
.child {
   font-weight: inherit; /* 親要素からフォントの太さを継承 */
}

.parent {

font-weight: bold;

}

.child {

font-weight: inherit; /* 親要素からフォントの太さを継承 */

}


p {
   font-weight: initial; /* 初期値に戻す（通常は normal または規定のウェイトに戻す） */
}

p {

font-weight: initial; /* 初期値に戻す（通常は normal または規定のウェイトに戻す） */

}


h1, h2, h3 {
   font-weight: bold; /* h1、h2、h3 のすべてを太字に設定 */
}

h1, h2, h3 {

font-weight: bold; /* h1、h2、h3 のすべてを太字に設定 */

}


strong {
   font-weight: bolder; /* テキスト内の strong 要素のフォントを強調表示 */
}

strong {

font-weight: bolder; /* テキスト内の strong 要素のフォントを強調表示 */

}