目次
はじめに: font-size は CSS のフォントのスタイル属性であり、テキスト属性 text-xxx と区別することに注意してください。テキストは個々の文字で構成されているため、フォントのプロパティはテキストのプロパティにも影響します。
1. フォントボックス
フォント ボックスは、フォントのデザイン時に使用される指定された高さであり、この高さは一度決定されると変更されません。フォントボックスの幅は比率に応じて変更されます。font-size 属性は、フォント ボックスの高さを指します。フォントのベースラインは、現在のフォントの文字 x の下の水平線です。
フォントサイズと行の高さの関係は下図のとおりです。下図の青色の背景色の高さが行の高さです。フォントサイズが行の高さより小さい場合、青色の背景色は行の高さになります。枠はフォントを囲みます。実際、この青い背景はボックス モデル プロパティの高さの値です。
フォントデザインの特性上、フォントの慣例として以下のような取り決めがございます。 フォントフレームには制限がありますが、フォントの美観を考慮してフォントフレームを超える現象が存在します。たとえば、文字: f、j、g などですが、いずれも上部のフォント ボックスを超えることはできません。
2、フォントサイズ属性
単位は px で、値は 0 より大きくなります。デフォルトは中です。このプロパティは継承されます。
構文:
font-size : 絶対サイズ | 相対サイズ | 長さ
パラメータ:
1. 絶対サイズ: オブジェクトのフォントに従って調整します。xx-small | x-small | small | middle |large | x-large | xx-large
2. 相対サイズ: 親イメージ内のフォントのサイズに対する相対サイズ。スケーリングされた em 単位を使用して計算されます。大きい値 | 小さい値
3、長さ: パーセンテージ | 浮動小数点数と単位識別子で構成される長さの値。負の値にすることはできません。そのパーセンテージ値は、親オブジェクトのフォントのサイズに基づきます。4、<割合>
テキストのサイズをパーセントで指定します。そのパーセンテージ値は、親オブジェクトのフォントのサイズに基づきます。負の値は許可されません。
デフォルトは絶対サイズの中間値です。
3、行の高さ属性
値は固定値で、単位は px (100px など) です。数値 1.5 はフォント サイズの 1.5 倍を意味するなど、相対値もあります。デフォルト値は通常です。パーセント値 (150%) も指定できます。また、line-height の値を 0 未満にすることはできません。
第四に、行の高さとフォントサイズの関係
boder、width、heightなどのcss属性など多くの属性は明示的に指定されていませんが、これらもデフォルトで存在しており、デフォルト値が使用されます。たとえば、幅と高さを指定しない場合は、コンテンツによって自動的に拡張され、ボックスが自動生成されます。line-height が指定されていない場合、その値は通常、つまりブラウザによって自動的に決定され、ブラウザはコンテンツのフォント サイズに応じて適切な行の高さの値を選択します。
行の高さを手動で指定するとフォント サイズに影響しますが、行の高さを手動で指定することもできます。指定した後、行の高さを変更してもフォント サイズは変更されません。フォントサイズの影響を受けます。line-height が font-size より小さいとフォントが重なってしまい、line-height が 0 の場合、このときのボックスの高さも 0 となり、背景色が消えてしまいます。
また、高さのプロパティは行の高さの影響を受けます。
ボックス モデルの属性の高さは line-height 属性によって決定されるため、height=line-height の場合、単一行のテキストは中央揃えになります。