CSS の Font プロパティは、テキストの外観を制御するために使用されます。 CSS フォント プロパティを使用すると、テキストのサイズ、色、スタイルなどを変更できます。テキストを太字にしたり下線を引いたりする方法はすでに学習しました。ここでは、パーセントを使用してフォントのサイズを変更する方法についても説明します。
以下にいくつかの重要なフォント属性を示します。
1) CSSフォントの色
CSS フォントの色は CSS フォントの一部であるように見えますが、CSS の独立した属性です。文字の色を変更する場合に使用します。
色を定義するには 3 つの異なる形式があります。
- 色の名前で言うと
- 16 進数値による
- RGBによる
上の例では、これらすべての形式を定義しました。
リストノードJava
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> 今すぐテストしてください 出力：
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) CSSのフォントサイズ
CSSのフォントサイズプロパティはフォントのサイズを変更するために使用されます。
フォント サイズの設定に使用できる値は次のとおりです。
| フォントサイズの値 | 説明 |
|---|---|
| xx-小 | 非常に小さい文字サイズを表示するために使用されます。 |
| X-小さい | 極小のテキスト サイズを表示するために使用されます。 |
| 小さい | 小さなテキストサイズを表示するために使用されます。 |
| 中くらい | 中程度のテキスト サイズを表示するために使用されます。 |
| 大きい | 大きなテキストサイズを表示するために使用されます。 |
| ×ラージ | 特大のテキスト サイズを表示するために使用されます。 |
| xx-大 | 非常に大きなテキスト サイズを表示するために使用されます。 |
| 小さい | 比較的小さな文字サイズを表示するために使用されます。 |
| より大きな | 比較的大きな文字サイズを表示するために使用されます。 |
| サイズ（ピクセルまたは%） | 値をパーセントまたはピクセルで設定するために使用されます。 |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>今すぐテストしてください
出力：
このフォントサイズは非常に小さいです。
このフォント サイズは非常に小さいです
このフォントサイズは小さいです
このフォント サイズは中です。
このフォントサイズは大きいです。
このフォント サイズは特大です。
Pythonのchr関数
このフォントサイズは非常に大きいです。
こちらのフォントサイズは小さめです。
こちらのフォントサイズの方が大きいです。
このフォント サイズは 200% に設定されています。
このフォント サイズは 20 ピクセルです。
4) CSSフォントスタイル
CSS フォント スタイル プロパティは、表示するフォントの種類を定義します。斜体、斜体、または標準体にすることができます。
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 今すぐテストしてください 出力：
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS フォントバリアント
CSS フォント バリアント プロパティは、要素のフォント バリアントを設定する方法を指定します。それは通常の小型株かもしれません。
android.process.acore が停止し続ける
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 今すぐテストしてください 出力：
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS フォントのウェイト
CSS のフォントの太さプロパティはフォントの太さを定義し、フォントの太さを指定します。フォントの太さの可能な値は、標準、太字、より太字、より軽い、または数値 (100、200.... 最大 900) です。
このフォントは太字です。
このフォントは太字です。
このフォントは明るいです。
このフォントはウェイト 100 です。
このフォントは 200 ウェイトです。
このフォントは 300 ウェイトです。
このフォントは400ウェイトです。
このフォントは500ウェイトです。
このフォントは600ウェイトです。
幸運を
このフォントは 700 ウェイトです。
このフォントは800ウェイトです。
このフォントは900ウェイトです。
今すぐテストしてください出力：
このフォントは太字です。
このフォントは太字です。
このフォントは明るいです。
このフォントはウェイト 100 です。
このフォントは 200 ウェイトです。
このフォントは 300 ウェイトです。
このフォントは400ウェイトです。
このフォントは500ウェイトです。
このフォントは600ウェイトです。
このフォントは 700 ウェイトです。
このフォントは800ウェイトです。
プライベート Java とパブリック Java
このフォントは900ウェイトです。