CSS：100％フォントサイズ-何の100％？

パーセンテージサイズのフォントと他のサイズのフォントについては、多くの 記事と質問があります。ただし、パーセント値の参照が何であると想定されているのかわかりません。これは「すべてのブラウザで同じサイズ」であることを理解しています。私もこれを読みました、例えば：

パーセント（％）：パーセント単位は「em」単位によく似ており、いくつかの基本的な違いを除けます。何よりもまず、現在のfont-sizeは100％（つまり、12pt = 100％）です。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。

出典：http : //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

ただし、「ie 12 pt = 100％」と言う場合は、最初にを定義する必要があることを意味しますfont-size: 12pt。それはどのように機能しますか？最初に絶対メジャーでサイズを定義し、次にこれを「100％」と呼びますか？多くのサンプルが次のようにすると便利だと言っているので、あまり意味がありません。

body {
  font-size: 100%;
}

だから、これを行うことで、何にフォントサイズの相対的なのですか？画面に表示されるサイズがすべてのフォントで異なることに気づきました。たとえば、ArialはTimes New Romanよりもはるかに大きく見えます。また、これを実行すると、ボディサイズ= 100％になります。つまり、すべてのブラウザで同じになるということですか。または、最初に絶対値を定義した場合のみですか？

更新、7月23日

到着しましたが、ご容赦ください。

したがって、％の値は、私が正しく理解していれば、デフォルトのブラウザーのフォントサイズに関連しています。それはいいことですが、他にもいくつか質問があります。

1. この標準サイズはすべてのブラウザーバージョンで常に同じですか、それともバージョン間で異なりますか？
2. 私 ！Google Chromeの設定が見つかりました（下の画像を参照）（これまでこれを見たことはありません！）。しかし、他のフォントでこれをどのように解釈すればよいですか？私が定義するfont: 100% Georgia;と、ブラウザはどのようなサイズになりますか？セリフの標準サイズを調べますか、それとも「ジョージア」フォントをブラウザの標準サイズにしますか
3. いくつかのウェブサイトで私はのようなものを読みましたSizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today。しかし、私が今学んでいることから、実際には、サイズ変更可能なテキスト（この引用で推奨されているように％またはemを使用）、または「ブラウザー全体で正確で一貫したフォントサイズ」を選択する必要があると考えています（pxまたはベースとしてpt）。これは正しいです？

Google設定：

これは私がどのように考える事ができ、あなたが絶対値でサイズを定義しない場合のように見えます。

Firefoxの16ptのようなブラウザのデフォルトです。Firefoxのオプションに移動し、[コンテンツ]タブをクリックして、フォントサイズを確認することで確認できます。他のブラウザでも同じことができます。

私は自分のWebサイトのデフォルトのフォントサイズを制御したいので、すべてのページに含まれているCSSファイルで、BODYのデフォルトを次のように設定します。

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

これで、すべてのHTMLタグのfont-sizeは14pxのfont-sizeを継承します。

すべてのdivのフォントサイズを本文より10％大きくしたいとします。

div {
    font-size: 110%
}

これで、私のページを表示するブラウザはすべて、すべてのdivを本文のdivよりも10％大きくします。これは、15.4pxのようなものです。

すべてのdivのフォントサイズを10％小さくしたい場合は、次のようにします。

div {
    font-size: 90%
}

これにより、すべてのdivのフォントサイズが12.6pxになります。

また、font-sizeが継承されるため、ネストされた各divのフォントサイズが10％減少することも知っておく必要があります。

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

内側のdivのフォントサイズは11.34px（12.6pxの90％）であり、意図されていない可能性があります。

これは説明に役立ちます：http : //www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

私の理解では、フォントが次のように設定されている場合

body {
  font-size: 100%;
}

ブラウザは、そのブラウザのユーザー設定に従ってフォントをレンダリングします。

仕様には％がレンダリングされると記載されています

親要素のフォントサイズを基準

http://www.w3.org/TR/CSS1/#font-size

この場合、私はそれをブラウザが設定されているものと解釈します。

font-sizeプロパティの値のパーセンテージは、親要素のフォントサイズを基準にしています。CSS 2.1はこれをあいまいにして混乱させます（「継承されたフォントサイズ」を意味します）が、CSS3 Text はそれを非常に明確に述べています。

body要素の親はルート要素、つまりhtml要素です。スタイルシートで設定されない限り、ルート要素のフォントサイズは実装に依存します。通常、これはユーザー設定に依存します。

font-size: 100%スタイルシートが独自のフォントサイズを設定していない場合、要素はその親のフォントサイズを継承するため（同じ結果につながるため）、設定は多くの場合無意味です。ただし、他のスタイルシート（ブラウザのデフォルトスタイルシートを含む）の設定を上書きすると便利な場合があります。

たとえば、input通常、要素にはブラウザのスタイルシートの設定があり、デフォルトのフォントサイズがコピーテキストのフォントサイズよりも小さくなっています。フォントサイズを同じにしたい場合は、

入力{font-size：100％}

body要素については、論理的に冗長な設定font-size: 100%がかなり頻繁に使用されます。これは、一部のブラウザーのバグ（おそらく、現在は重要性を失っているブラウザーのバグ）を解決すると考えられているためです。

ptまたはpxの値で上書きしない限り、デフォルトのブラウザーのフォントサイズを基準にしています。

私がパーティーに遅れた場合は申し訳ありませんが、あなたの編集font: 100% Georgiaで、について発言しますが、他の回答は応答していません。

とには違いがfont: 100% Georgiaありfont-size:100%; font-family:'Georgia'ます。それがすべての簡略化された方法であった場合、font-sizeの部分は無意味になります。しかし、それはまた、多くのプロパティをデフォルト値に設定します：行の高さnormal（または約1.2）、スタイル（斜体ではない）、太さ（太字ではない）になります。

それで全部です。他の回答はすでに言及すべき他のすべてを述べました。

説得力があるように、font-size: 100%;すべてのブラウザで同じように表示されるわけではありません。ただし、CSSファイルでフォントフェースを設定するため、すべてのブラウザで同じ（またはフォールバック）になります。

ベースのデザインfont-size: 100%;と組み合わせると非常に便利だと思いますem。この記事を示し、これは非常に柔軟なウェブサイトを作成します。

これはいつ役に立ちますか？サイトが訪問者の希望に適応する必要がある場合。たとえば、デフォルトのフォントサイズを24ピクセルに設定している年配の男性を例にとります。または、画面が小さく、解像度が高く、デフォルトのフォントサイズが大きくなる人もいます。ほとんどのサイトは機能しなくなりますが、emベースのサイトはこれらの状況に対処できます。

そのフォントに定義されているデフォルトサイズを基準とします。

誰かがWebブラウザーでページを開いた場合、デフォルトのフォントとフォントサイズが使用されます。

私の理解としては、フォントファミリーとフォントサイズのさまざまな値でコンテンツを調整するのに役立ちます。したがって、コンテンツをスケーラブルにします。フォントサイズの継承の問題については、要素に特定のフォントサイズを指定することで、いつでもオーバーライドできます。

1996年に遡るすべての仕様によると、パーセンテージ値font-sizeは親要素の（計算された）フォントサイズを参照しています。

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

とても簡単です。

がs divなどemの相対的なフォントサイズ、さらに悪い場合は別のパーセンテージを宣言するとどうなりますか？上記の「計算済み」を参照してください。相対単位に変換される絶対単位。

残っている唯一の問題は、親を持たないルート要素にパーセント値を使用するとどうなるかです。

html {
  font-size: 62.5%; /* 62.5% of what? */
}

その場合は、この質問の「重複」を参照してください。TLDR：ルート要素のパーセンテージは、ブラウザーのデフォルトのフォントサイズを参照し、ユーザーごとに異なる場合があります。

参照：

• CSS 1仕様（1996）
• CSS 2.1仕様（2011）
• CSSフォントレベル3仕様（2013）
• CSSフォントレベル3エディターのドラフト（2017）