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

一般的な単位

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

絶対単位 ほとんどの場合、それらは実際の測定値に対して固定された値です。つまり、一度設定されると、他の要素のフォント サイズの変更によって変更されることはありません。

相対単位は固定された測定値ではなく、親要素のサイズによって決定される相対的な値を持ち、関連する要素の変化に応じてサイズが変化します。

これらの単位の簡単な概要は次のとおりです:

単位タイプの説明 pxAbsolute1 ビューポート ピクセル ptAbsolute1pt = 72インチ pcAbsolute1pc = 12pt%Relative親要素に対する相対的なフォントサイズemRelative 親要素に対する相対的なフォントサイズ要素 レム相対(つまり root em) HTML タグに対する相対的なフォント サイズキーワード相対xx-small、x-small、small、medium、large、x-large、xx-large vw相対ビューポートの幅の1/100に相当vh相対ビューポートの高さの1/100に相当vmin相対 ビューポートの高さ、幅に相当、および長さ 比較的小さい 1/100vmaxRelative は、ビューポートの高さ、幅、および長さの比較的大きい 1/100 に相当します。

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

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

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

例 1. デフォルト設定

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

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

まだ理解できませんか?たとえば、1 つの e388a4556c0f65e1904146cc1a846bee のフォント サイズを 100% に設定し、別の e388a4556c0f65e1904146cc1a846bee のフォント サイズを 16 ピクセルに設定すると、2 つの e388a4556c0f65e1904146cc1a846bee のフォント サイズが 100% に設定されます。同様に、次の図はいくつかの異なる単位で設定されたフォント サイズをリストしたもので、それらが同じサイズであることがわかります。単位と相対単位の違い。 100db36a723c770d327fc0aef2ce13b1 が html { font-size: 200% } に設定されている場合、相対単位を使用するすべての e388a4556c0f65e1904146cc1a846bee に影響します。効果は次のとおりです。

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

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

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

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

なぜなら、

は6c04bd5ca3fcae76e30b72ad730ca86d の子要素、6c04bd5ca3fcae76e30b72ad730ca86d は 100db36a723c770d327fc0aef2ce13b1 の子要素であるため、e388a4556c0f65e1904146cc1a846bee の em と % は以前の 2 倍になります。

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

rem を使用すると、この問題を非常にうまく解決できます。 rem は、親要素を考慮せずに 100db36a723c770d327fc0aef2ce13b1 のフォント サイズを計算するだけで済みます。次のコードに示すように:

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

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

例 4. ビューポートの幅

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

このユニットはレスポンシブデザインに最適ですが、個人的にはあまり興味がありません。 vw を使用する過程で、フォント サイズをうまく制御できません。大きすぎたり、小さすぎたりします。

私のやり方

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

ただし、このアプローチにはある程度の制限があることがわかりました。フォント サイズは小から中程度の画面では適切に見えますが、大画面ではより適切に最適化されます。ユーザーはズームのプロパティを自分で設定できますが、ユーザーの作業を最小限に抑えたいと考えています。私の解決策は、rem を使用し、フォールバック単位として 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 を使用する理由は、rem が IE8 以下のバージョンをサポートしていないためです。この解決策の 1 つの問題は、上記のように基本フォント サイズを変更しても、バックアップ フォント サイズに影響を与えないことです。ただし、大きなデバイスのサイズに適合する機能は、中核的な機能ではなく、おまけにすぎないため、これは大きな問題ではないと思います。

概要

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