CSS_html/css_WEB-ITnoseのフォントサイズ設定について-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-21 09:14:18

オリジナル

1226 人が閲覧しました

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

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