CSSはフォントサイズを設定します

CSS はフォント サイズを設定します

CSS (Cascading Style Sheets、カスケード スタイル シート) は、ドキュメントのプレゼンテーション効果を記述するために使用されるマークアップ言語です。 Web デザインでは、CSS はテキスト、色、背景、境界線、スタイル、その他の要素のプロパティを定義するためによく使用されます。その中でも、フォント サイズは CSS で最も基本的でよく使用されるプロパティの 1 つです。

CSS はさまざまな方法でフォント サイズを設定できます。フォント サイズを設定する一般的な方法は次のとおりです。

1. ピクセル (px) を使用する

ピクセル (ピクセル、px と省略) は、フォント サイズを設定する最も一般的な方法です。ユニット。単位としてピクセルを使用する場合、ブラウザ ウィンドウを拡大するとフォント サイズが変化します。たとえば、次のコードは、「body」要素のフォント サイズを 16 ピクセルに設定します。 親要素のフォント サイズに依存します。たとえば、要素のフォント サイズが 1em で、その親要素のフォント サイズが 16 ピクセルの場合、要素のフォント サイズは 16 ピクセルになります。フォント サイズを 2em に設定すると、そのフォント サイズは親要素のフォント サイズの 2 倍になります。次のコードは、「body」要素のフォント サイズを 1.2em に設定します。

body {
  font-size: 16px;
}

2. パーセンテージの使用

パーセンテージは相対単位であり、そのサイズはフォントによって異なります。親要素のサイズ。たとえば、要素のフォント サイズが 100% で、その親要素のフォント サイズが 16 ピクセルの場合、この要素のフォント サイズも 16 ピクセルになります。フォント サイズを 120% に設定すると、そのフォント サイズは親要素のフォント サイズの 120% になります。次のコードは、「body」要素のフォント サイズを 120% に設定します。

body {
  font-size: 1.2em;
}

3. Use rem

rem は相対単位であり、そのサイズはフォントによって異なります。ルート要素のサイズ。デフォルトでは、ルート要素のフォント サイズは 16px です。フォント サイズを 2rem に設定すると、フォント サイズは 32px (2 x 16px) になります。次のコードは、「body」要素のフォント サイズを 1.5rem に設定します。

body {
  font-size: 120%;
}

CSS を使用してフォント サイズを設定する場合は、次の点に注意する必要があります。

フォントを設定する場合 サイズは均一のスケールに従う必要があります。たとえば、基本フォント サイズを 16 ピクセルに設定し、そこから調整できます。

フォント サイズは、Web デザインのスタイルとニーズに合ったものにする必要があります。一般的に、本文のフォント サイズは 14px ～ 18px、タイトルのフォント サイズは 20px ～ 32px にする必要があります。

モバイル Web デザインの場合、さまざまなサイズの画面に適応するフォント サイズを設定するには、相対単位 (em、rem など) を使用する必要があります。

1. CSS フォント サイズの設定は、Web デザインにおける最も基本的かつ重要な属性の 1 つです。フォント サイズを正しく設定すると、Web ページがより読みやすく使いやすくなり、ユーザー エクスペリエンスが向上します。

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