CSSでフォントのサイズを設定するとき、パーセント値(%
)またはem
?利点を説明できますか?
A List Apart には、Webタイポグラフィに関する非常に優れた記事があります。
彼らの結論:
本文でパーセンテージを指定したemsでのテキストと行の高さのサイジング(およびSafari 2のオプションの警告)は、今日一般的に使用されているすべてのブラウザーで正確でサイズ変更可能なテキストを提供することが示されました。これはキットバッグに入れて、デザイナーと読者の両方を満足させるCSSでテキストのサイズを設定するためのベストプラクティスとして使用できる手法です。
から http://archivist.incutio.com/viewlist/css-discuss/1408
%:一部のブラウザーはfont-sizeのパーセントを処理しませんが、150%を150pxとして解釈します。 (たとえば、一部のNN4バージョン。)IEはネストされた要素のパーセントにも問題があります。IEは親に対してではなく、ビューポートに対してパーセントを使用しています要素:Moz/Ns6では、別の問題(W3C仕様によると正しい)ですが、高さ/幅が指定されていない要素に対するパーセントを使用できません。
em:ブラウザーは間違った参照サイズを使用する場合がありますが、相対的な単位の場合は問題が最も少ないものです。ただし、pxとして解釈される場合があります。
pt:解像度によって大きく異なるため、表示には使用しないでください。ただし、印刷物を使用する場合は非常に安全です。
px:画面上の唯一の信頼できる絶対単位。ただし、1ポイントは通常複数のピクセルで構成されているため、印刷では誤って解釈される可能性があり、そのためすべてが途方もなく小さくなります。
どちらも、フォントサイズを調整します。 1.5emは150%と同じです。唯一の利点は読みやすさのようです。最も使いやすいものを選択してください。
(ほぼ?)すべてのブラウザが、テキストだけでなく、ページ全体のサイズを変更することを考えると、アクセシビリティに関する「px
vs. %
vs. em
s」の以前の問題フォントのサイズ変更はかなり重要ではありません。
そのため、答えはおそらく重要ではないということです。あなたのために働くものは何でも使用してください。
%
は、相対的なサイズ変更が可能なのでいいです。
px
は、それを使用するときに期待を管理するのがかなり簡単だからいいです。
em
は、テキストサイズに関連する比例的なサイズ変更を可能にするため、レイアウト要素にも使用される場合に役立ちます。
実際の違いは、フォントサイズではなくそれを使用すると明らかになります。 1em
のpadding
の設定は、100%
と同じではありません。 em
は常にfont-sizeに相対的です。しかし、%
は、フォントサイズ、幅、高さ、およびおそらく私が知らない他のいくつかに関連する可能性があります。
CSSユニット%
とem
の違いについて。
私が理解する限り(少なくとも理論的/概念的には、これらの2つのユニットがブラウザに実装される方法はないかもしれません)、これら2つのユニットは同等です。つまり、em
値に100
em
を%
に置き換えて、同じものにする必要がありますか?
実際にemと%の間に実際の違いがある場合、誰かがそれを説明できますか(または説明へのリンクを提供します)?
(私のコメントをそれが属する場所に追加したかった。つまり、"Liam, answered Sep 25 '08 at 11:21"
で答えのすぐ下にインデントしたかった。なぜなら彼の答えがダウン投票された理由も知りたいからである。したがって、この「スレッドグローバル」応答を記述する必要がありました)