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

個人訳、転載の際は出典を明記してください
英語原文: CSS Font Sizing

前に書いてください

前回の記事 モバイルレスポンシブデザインで良い仕事をする方法: ビューポートコントロールでCSSピクセルについて議論しましたので、 CSS でフォ​​ント サイズを設定するさまざまな方法を調べることにしました。

一般的な単位

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

• 絶対単位 は、ほとんどの場合、実際の測定値に対して固定された値です。つまり、一度設定されると、他の要素のフォント サイズの変更によって変更されることはありません。
• 相対単位は、固定された測定値ではなく、親要素のサイズによって決定される相対的な値を持ち、関連する要素の変更に応じてサイズが変化します。

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

pt絶対1pt = 1/ 72 インチ pcAbsolute1pc = 12pt%Relative親要素に対する相対的なフォントサイズem 相対親要素に対する相対的なフォント サイズ remRelative (つまり、root em) HTML タグに対する相対的なフォント サイズ keywordRelativexx-small、x-small、small、medium、large、x-large、xx -largevw相対ビューポートの幅の1/100に相当vh相対ビューポートの高さの1/100に相当vmin親戚ビューポートの高さと幅の比較的小さい長さの 1/100 に相当しますvmax相対ビューポートの高さと幅の比較的大きな長さの 1/100 に相当します

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

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

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

例 1. デフォルト設定

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

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

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

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

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

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 つの問題は、上記のように基本フォント サイズを変更しても、バックアップ フォント サイズに影響を与えないことです。ただし、大型デバイスのサイズに適合する機能はおまけにすぎず、中核的な機能ではないため、これは大きな問題ではないと思います。

この問題に関してもっと良いアイデアがある場合は、コメントするか、私にプライベートメッセージを送ってください。

Unit	Type	Description
px	Absolute	1 Viewport ピクセル