CSSスタイルでフォントサイズを設定する方法

CSS スタイルでは、「font-size」属性を使用してフォント サイズを設定できます。「font-size: value;」スタイルをテキスト要素に設定するだけです。 font-size 属性は、フォント サイズの設定に使用されます。実際には、フォント内の文字ボックスの高さを設定します。実際の文字グリフは、ボックスよりも高いか低い場合があります (通常は低い)。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css スタイルでは、「font-size」属性を設定することでフォントサイズを設定できます。

font-size 属性は、要素に含まれるテキストのフォント サイズを設定するために使用できます。要素で font-size 属性が明示的に定義されていない場合、親要素の font-size 属性の計算結果が自動的に継承されます。

実際、 font-size 属性は、フォント内の文字ボックスの高さを設定します。実際の文字グリフは、これらのボックスよりも高い場合もあれば低い場合もあります (通常は低い)。

フォント サイズを定義するときは、事前定義されたキーワード、絶対サイズ、および相対サイズを使用できます。

1) 事前定義されたキーワード

事前定義された定義キーワードはxx-small、x-small、small、medium、large、x-large、xx-largeで、服のサイズと同じように順番にサイズが大きくなります。

事前定義されたキーワードの使用には 2 つの大きな欠陥があります。1 つ目は、選択肢が 7 つしかなく、選択肢の範囲が狭すぎることです。2 つ目は、衣服のサイズと同じように、メーカーごとに対応する正確なフォント サイズが異なることです。値は異なる場合があり、ブラウザーごとにテキストのサイズが異なる場合があります。したがって、事前定義されたキーワードを使用してフォント サイズを定義することはお勧めできません。

2) 絶対サイズ

絶対サイズには、px (ピクセル)、pt (ポイント、1pt は 1/72 インチに相当)、in (インチ)、cm (センチメートル））、mm（ミリメートル）など例:

.px {
 font-size: 14px;
}
.pt {
 font-size: 10pt;
}
.in {
 font-size: .15in;
}
.cm {
 font-size: .4cm;
}
.mm {
 font-size: 4mm;
}

<p class="px">字体大小： 14px</p>
<p class="pt">字体大小： 10pt</p>
<p class="in">字体大小： .15in</p>
<p class="cm">字体大小： .4cm</p>
<p class="mm">字体大小： 4mm</p>

上記のコードは、絶対単位を使用して 5 つのフォント サイズを定義します。絶対長単位を使用すると、固定解像度のモニター上に固定サイズで表示されます。実行結果は以下の通りです:

フォントサイズがpxで設定されている場合、IEブラウザを使用しているユーザーはブラウザ上で「文字サイズ」を設定することができません。テキストを減らします。テキストが小さすぎると、読みに影響し、ユーザー エクスペリエンスが大幅に低下します。

3) 相対サイズ

相対サイズには、em、%、rem が含まれます。これらはすべて、現在のフォント サイズを計算するための特定の基準ベースに対する相対的なフォント サイズです。 、参照ベースのみが異なります。

em の参照ベースは親要素です。では、指定する em 値はどのように計算するのでしょうか?実際、1em は常に親要素の font-size 属性の値と等しく、これが em の仕組みです。したがって、パーセンテージの値は、次の式で求めることができます。

対象要素のフォント サイズ / 親要素のフォント サイズ = 値

したがって、 em 定義を使用する場合 フォントのサイズを変更するときは、html 要素または body 要素にベースラインを確立するのが最善です。本文に設定されている基本サイズが 12px であると仮定します。

body {
 font-size: 12px;
}

本文内のすべての段落のフォント サイズを 18px にしたい場合は、上記の式に従って次のようにします。

18 / 12 = 1. 5

したがって、段落のフォント サイズを 1.5em に設定するだけです。このルールは、段落テキストのフォント サイズが段落テキストのテキスト サイズの 1.5 倍であることを意味します。親要素:

body p {
 font-size: 1.5em;
}

% の参照ベースも親要素であり、100% は常に親要素の font-size 属性の値と等しくなります。つまり、1em は 100% と等しくなります。 。つまり、% を使用してフォント サイズを定義する場合、em 値を対応するパーセンテージに変換するだけで済みます。したがって、次の 2 つの宣言は同じ結果になります (2 つの段落が同じ親要素を持つと仮定して):

p.one {
 font-size: 1.5em;
}
p.one {
 font-size: 150%;
}

font-size は継承可能ですが、定義時に % と em を使用することに注意してください。フォント サイズの場合、子要素は % や em の数値ではなく、計算された値を継承します。また、%やemも累積することができます。次のコードを考えてみましょう:

p {
 font-size: 12px;
}
em {
 font-size: 200%;
}
strong {
 font-size: 200%;
}

<p>12px <em> 200% <strong> 200% </strong></em></p>

上記のコードでは、p は親要素、em は p の子要素、strong は em の子要素です。 em 要素のベースは p 要素であり、strong 要素のベースは em 要素です。計算結果は次のとおりです。

em：12 × 200% = 24px
strong：24 × 200% = 48px

得られた実行結果は次の図に示すとおりです。

この多層ネストの場合、特定の計算の結果が整数でない場合、ブラウザはそれを切り上げることがあり、子要素は切り上げられた値を継承します。ネストが非常に深い場合、下層のレイヤーのフォント サイズは実際の計算値からますます乖離します。また、参照基数は要素に応じて常に変化するため、ネストが深くなるほど計算が難しくなります。

これを考慮して、CSS3 の新しい相対単位 rem (ルート em の略語) は、常にドキュメントのルート要素 (つまり html 要素) を参照として使用して、他の要素のフォント サイズを設定します。つまり、1rem は html 要素の font-size 属性の値に相当します。次のコードを考えてみましょう:

html {
 font-size: 10px;
}
p {
 font-size: 1.4rem;
}

上述声明中，p 元素的字体大小将是 html 字体大小的1.4倍，则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。

这样一来，无论嵌套多少层，参考基准始终不变，计算字体大小就变得容易多了。不过，需要注意的是，rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。

在定义字体大小时，笔者建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。

这样做的好处是，一方面，绝大多数元素都不必定义字体大小，减少不必要的定义；另一方面，如果完成所有的文字排版后，又要统一调整页面文字大小，就可以只修改 html 中的字体大小，其它所有文字的字体大小会自动变化，修改起来就很容易。

说明：

在某些特殊场景下，需要把 font-size 的值设置为0，来隐藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本却变成了小黑点，并没有完全隐藏。

解决这个问题的最简单办法，就是在 font-size: 0 的同时，把 text-indent 属性设置为一个很大的负值，让这些文本显示在屏幕之外，自然就被隐藏起来。

（学习视频分享：css视频教程）

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