CSSを使ってフォントを設定する方法

CSS は Web デザインの最も重要な部分であり、Web ページでさまざまなスタイルやレイアウトを表現できるようになります。最も基本的な CSS プロパティの 1 つは font で、これはフォント プロパティです。フォントを設定すると、Web ページ内のテキストのサイズ、色、フォント、およびその他の関連属性を制御できます。

次に、フォントの設定方法に関するいくつかのヒントと知識ポイントを示します。これは、この一般的に使用される CSS プロパティをよりよく習得するのに役立ちます。

1. フォント サイズの設定

CSS では、通常、テキストのサイズを設定するために font-size 属性が使用されます。その値は、ピクセル (px)、パーセンテージ (%)、em、rem などです。一般に、長さの絶対単位であるピクセルは、固定サイズのレイアウトにより適しています。たとえば、h1 要素のフォント サイズを 36 ピクセルに設定できます:

h1 {

font-size: 36px;

}

一方、相対的な長さの単位にはパーセンテージと em の方が適しています。スケーラブルなデザインのウェブサイト。たとえば、段落要素のフォント サイズを 1.2 倍に設定できます。

p {

font-size: 120%;

}

2. フォント設定

フォント サイズに加えて、フォント (font-family) も重要な属性です。 font-family を設定することで、テキストのデフォルトのフォントを変更できます。通常、Web ページでは複数のフォントが使用されます。したがって、フォント属性を設定するときは、訪問者が Web ページ上でフォントを正しく表示できるように、複数のフォントをカンマで区切ることができます。例:

body {

font-family: "Microsoft YaHei", "SimHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

この例では、最初のフォント「Microsoft YaHei」が訪問者のコンピュータで利用できない場合、それが試行されます。 Web ページが正しく表示されるまで、他のフォントを使用してください。

3. 太字と斜体の設定

font-weight プロパティを使用して、フォントの太さを設定できます。その値は、normal (デフォルト)、bold (太字)、bolder (太字)、lighter (より明るい)、100 ～ 900 (数値が大きいほどフォントが太くなります) などです。

たとえば、h2 要素のフォントを太字にするには:

h2 {

font-weight: bold;

}

font-style 属性を使用して設定できます。テキストが italics で表示されるかどうか、その値は、normal (デフォルト)、italic (斜体)、oblique (oblique) などになります。

たとえば、テキストの段落を斜体に設定するには:

p {

font-style: italic;

}

4. 行の高さの設定

Line-height はテキスト行間の垂直方向の距離を指します。デフォルト値は標準であり、フォント自体によって指定されます。 line-height プロパティを設定すると、行間の距離を制御でき、それによって段落全体のレイアウト効果に影響を与えます。

たとえば、h3 要素の行の高さを 1.6 倍に設定します。

h3 {

line-height: 1.6;

}

つまり、フォント属性、フォントのサイズ、色、フォント、太さ、行の高さなどのさまざまな側面を簡単に調整して、美しくユニークな Web デザイン効果を作成できます。

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