web-dev-qa-db-ja.com

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

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

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

ソース： http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

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

body {
  font-size: 100%;
}

それで、これを行うことで、WHATのフォントサイズは相対的ですか？画面に表示されるサイズは、フォントごとに異なります。たとえば、ArialはTimes New Romanよりもずっと大きく見えます。また、これを行うと、body size = 100％になりますthatは、すべてのブラウザーで同じになることを意味しますか？または、最初に絶対値を定義した場合のみですか？

更新、SAT 7月23日

私はそこに着いていますが、我慢してください。

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

  1. この標準サイズは、すべてのブラウザーバージョンで常に同じですか、それともバージョンによって異なりますか？
  2. 私 ！ Google Chromeの設定（下の画像を参照）が見つかりました（これまで見たことがない！）。標準の「serif」、「sans-serif」、「monospace」の設定が表示されます。しかし、これを他のフォントでどのように解釈すればよいですか？ font: 100% Georgia;を定義するとします。ブラウザはどのサイズになりますか？セリフの標準サイズを検索しますか、それとも「Georgia」フォントをブラウザの標準サイズにしますか
  3. いくつかのウェブサイトでは readSizing 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を使用）または「ブラウザ間で正確で一貫したフォントサイズ」を選択する必要があると信じていますベースとしてpt）。これは正しいです？

Google設定：

Google Chrome Settinsg

これは、私が思考事柄couldで、絶対値でサイズを定義しない場合のように見える方法です。

enter image description here

cssfont-size
128
user852091

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

私は個人的に私のウェブサイトのデフォルトのフォントサイズを制御したいので、すべてのページに含まれるCSSファイルでは、次のようにBODYデフォルトを設定します：

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

これで、すべてのHTMLタグのフォントサイズが14pxのフォントサイズを継承します。

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

div {
    font-size: 110%
}

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

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

div {
    font-size: 90%
}

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

また、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

84
b01

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

body {
  font-size: 100%;
}

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

仕様には、％がレンダリングされると書かれています

親要素のフォントサイズに相対的

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

この場合、私はそれをブラウザが何に設定されているかを意味します。

15
Jason Gennaro

font-sizeプロパティの値の割合は、親要素のフォントサイズに相対的です。 CSS 2.1は、これをあいまいでわかりにくい（「継承されたフォントサイズ」を参照）と言っていますが、CSS3 Text says それは非常に明確です。

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

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

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

入力{font-size：100％}

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

9
Jukka K. Korpela

Ptまたはpxの値で上書きしない限り、デフォルトのブラウザのフォントサイズに相対的です。

4
RocketR

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

font: 100% Georgiaとfont-size:100%; font-family:'Georgia'には違いがあります。それがすべて省略表現の方法であった場合、フォントサイズの部分は無意味になります。ただし、多くのプロパティをデフォルト値に設定します。行の高さはnormal（または1.2前後）、スタイル（イタリック体でない）、太さ（太字でない）になります。

それで全部です。他の回答では、言及すべき他のすべてがすでに言及されています。

4
Mr Lister

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

font-size: 100%;は、emベースのデザインと組み合わせるときに非常に役立つと思います。 この記事 が示すように、これは非常に柔軟なWebサイトを作成します。

これはいつ便利ですか？サイトが訪問者の希望に適応する必要がある場合。たとえば、デフォルトのフォントサイズを24ピクセルに設定している老人を考えてみましょう。あるいは、解像度が大きく画面が小さく、デフォルトのフォントサイズを大きくする人。ほとんどのサイトは壊れますが、emベースのサイトはこれらの状況に対処できます。

3
Tim

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

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

1
Yochai Timmer

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

0
Mith

1996年まで遡るすべての仕様によれば、font-sizeのパーセント値は親要素の（計算済み） フォントサイズ。

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

とても簡単です。

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

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

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

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

参照：

0
chharvey