CSSでフォントの太字スタイルを設定する方法-CSSチュートリアル-php.cn

CSSでフォントの太字スタイルを設定する方法

青灯夜游

リリース： 2021-04-16 11:24:51

オリジナル

74063 人が閲覧しました

CSS でフォントの太字スタイルを設定する方法: 最初に HTML サンプルファイルを作成し、最後に「font-weight:bold;」または「font-weight:bolder;」を渡します。 " プロパティを使用してフォントの太字スタイルを設定するだけです。

CSSでフォントの太字スタイルを設定する方法

#この記事の動作環境: Windows7 システム、Dell G3 コンピューター、HTML5&&CSS3。

まずは簡単なコード例を通して、フォントを太字にする

cssの実装方法を詳しく解説します!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 字体加粗</title>
		<style>
			.a1{
				font-weight:bold;
			}
			.a2{
				font-weight:bolder;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一段测试文字<br />
				<span class="a1">这里使用bold属性值加粗字体</span><br />
			
				<span class="a2">这里使用bolder属性值加粗字体</span>
			</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリングを見てみましょう:

CSSでフォントの太字スタイルを設定する方法

例を通して、次のことがわかります: ここでのフォントの太字効果は主に次の用途で使用されます。 css font-weight:bold および font-weight:bolder; のスタイル属性。 font-weight 属性はテキストフォントの太さを設定でき、bold 属性値を設定すると太字を定義でき、bolder 属性値を設定するとより太い文字を定義できるため、太字フォント効果が得られることを知っておく必要があります。

css の font-weight 属性では、bold 属性値とbololder 属性値でフォントを太字にするだけでなく、フォントを太字にする数値を設定することもできます。その効果を見てみましょう。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 字体加粗</title>
		<style>
			.a1{
				font-weight:bold;
			}
			.a2{
				font-weight:800;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一段测试文字<br /><br />
				<span class="a1">这里使用bold属性值加粗字体</span><br /><br />
			
				<span class="a2">这里使用数值加粗字体</span>
			</p>
		</div>
	</body>
</html>

ログイン後にコピー

効果図:

CSSでフォントの太字スタイルを設定する方法

説明:

font-weight 属性は、テキストで使用される太字フォントを設定するために使用されます。表示要素。数値 400 はキーワードの Normal (標準フォント) に相当し、700 は Bold (太字フォント) に相当します。各数値の太字フォントは、少なくとも次に小さい数値と同じくらい薄く、少なくとも次に大きい数値と同じくらい太くなければなりません。

要約: 上記は、この記事で紹介したフォントの太字スタイルを設定するすべての方法です。理解を深め、css font-weight 属性にさまざまな値を設定するために自分で試してみることができます。必要に応じてフォントを太字にします。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

CSS 基本ビデオチュートリアル、 HTML ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

以上がCSSでフォントの太字スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。