CSS等のフォントサイズ設定について_html/css_WEB-ITnose

一般的な単位

フォント サイズは CSS でさまざまな方法で設定できます。一般に、これらの単位は、絶対単位と相対単位の 2 つのカテゴリに分類されます。

ここでは主に、px、pt、%、em、rem、vw の単位に焦点を当てます。

それらの違いは何ですか?

これらの単位の違いを概念的に理解するのは難しいため、いくつかの例を使用して説明しましょう。

例 1. デフォルト設定

フォント サイズを設定しない場合、HTML によってデフォルトのサイズ設定が提供されます。ほとんどのブラウザの タグと のデフォルトのフォント サイズは 100% です。この方程式を見てください:

100% = 1em = 1rem = 16px = 12pt

まだ理解できませんか?たとえば、1 つの

のフォント サイズを 100% に設定し、別の

のフォント サイズを 16 ピクセルに設定すると、2 つの

のフォント サイズが 100% に設定されます。同様に、次の図はいくつかの異なる単位で設定されたフォント サイズをリストしたもので、それらが同じサイズであることがわかります。単位と相対単位の違い。 が html { font-size: 200% } に設定されている場合、相対単位を使用するすべての

に影響します。効果は次のとおりです。

これが相対単位の主な利点です。この相対単位の機能を利用すると、フォント サイズを変更するだけで、真に応答性の高いページを設計できます。 .

例 3. rem と em (または %)

em (または %) は、親要素のフォント サイズによってサイズを計算する必要があります。

html {   font-size: 100% /* =16px */}body {  font-size: 2em; /* =32px */}p {  font-size: 1em; /* =32px */  /* font-size: 0.5em; =16px */}

ログイン後にコピー

なぜなら、

は の子要素、 は の子要素であるため、

の em と % は以前の 2 倍になります。

em 単位を要素に追加するときは、すべての親要素のフォント サイズを考慮する必要があります。ご覧のとおり、これは簡単に混乱を招く可能性があります。

html {   font-size: 100% /* =16px */}body {  font-size: 2rem; /* =32px */}p {  font-size: 1rem; /* =16px */}

rem を使用すると、em/% と同じスケーリング機能を使用できますが、これらの複雑なネストされた関係を考慮する必要はありません。

例 4. ビューポートの幅

vw は CSS3 で新しく提案された単位で、ビューポートの幅を使用してフォント サイズを計算します。これにより、より柔軟なレスポンシブ フォントの設計が可能になります。

この記事を書いているとき、単位としてpxのみを使用しています。現在、ほとんどのブラウザでユーザーがページを拡大できるため、その際にアクセシビリティの問題は発生しません。

html {  font-size: 62.5%; /* sets the base font to 10px for easier math */}body {  font-size: 16px;  font-size: 1.6rem;    /* sets the default sizing to make sure nothing is actually 10px */}h1 {  font-size: 32px;  font-size: 3.2rem;}

@media screen and (min-width: 1280px) {  html {    font-size: 100%;  }}

私がよく使用するフォント設定は、px、%、em、rem のみです。