ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでフォントの太さを変更する方法
CSSでフォントの太さを変更する方法
- 醉折花枝作酒筹オリジナル
- 2021-07-26 15:00:106274ブラウズ
CSSでは、font要素に「font-weight: value;」を設定するだけで、font-weight属性を使用してフォントの太さを変更できます。このプロパティは、表示要素のテキストで使用されるフォントを太字に設定するために使用されます。数値 400 はキーワード Normal に相当し、700 は太字に相当します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
HTML では、a4b561c25d9afb9ac8dc4d70affff419 タグまたは 8e99a69fbe029cd4e2b854e244eab143 タグを追加してテキストの太さを設定します。
CSSは文字の太さを細かく分割したり、太字を通常の太さの表示に変更したりすることができます。
<html>
<head>
<title>文字粗细</title>
<style>
h1 span {
font-weight: lighter;
}
span {
font-size: 30px;
}
span.one {
font-weight: 100;
}
span.two {
font-weight: 200;
}
span.three {
font-weight: 300;
}
span.four {
font-weight: 400;
}
span.five {
font-weight: 500;
}
span.sex {
font-weight: 600;
}
span.seven {
font-weight: 700;
}
span.eight {
font-weight: 800;
}
span.nine {
font-weight: 900;
}
span.ten {
font-weight: bold;
}
span.eleven {
font-weight: normal;
}
</style>
</head>
<body>
<h1>文字<span>粗</span>体</h1>
<span class="one">文字粗细：100</span>
<span class="two">文字粗细：200</span>
<span class="three">文字粗细：300</span>
<span class="four">文字粗细：400</span>
<span class="five">文字粗细：500</span>
<span class="six">文字粗细：600</span>
<span class="seven">文字粗细：700</span>
<span class="eight">文字粗细：800</span>
<span class="nine">文字粗细：900</span>
<span class="ten">文字粗细：bold</span>
<span class="eleven">文字粗细：normal</span>
</body>
</html>テキストの太さは、属性 font-weight によって CSS で設定されます。上記のコードは、ほぼすべてのテキストの太さの値をカバーしており、フォント自体を太字にすることも、通常の太字にすることもできます。
推奨学習: css ビデオ チュートリアル
以上がCSSでフォントの太さを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSフォントアイコンの使い方次の記事：CSSフォントアイコンの使い方