116

CSS でフォ​​ントのサイズを設定する場合、パーセント値 ( %) またはを使用する必要がありemますか? 利点を説明できますか？

4

8 に答える 8

80

A List Apartに Web タイポグラフィに関する非常に優れた記事があります。

彼らの結論:

テキストと行の高さを ems 単位でサイズ設定し、本文にパーセンテージを指定すると (および Safari 2 のオプションの注意事項)、現在一般的に使用されているすべてのブラウザーで、正確でサイズ変更可能なテキストが提供されることが示されました。これは、キットバッグに入れて、デザイナーと読者の両方を満足させる CSS でテキストのサイズを変更するためのベストプラクティスとして使用できる手法です。

于 2008-09-25T11:22:14.383 に答える
15

http://archivist.incutio.com/viewlist/css-discuss/1408より

%: 一部のブラウザーでは、font-size のパーセントを処理せず、150% を 150px として解釈します。(たとえば、一部の NN4 バージョン。) IE には、ネストされた要素のパーセントに関する問題もあります。IE は、親要素に対する相対ではなく、ビューポートに対する相対パーセントを使用しているようです。Moz/Ns6 では、高さ/幅が指定されていない要素に対してパーセントを使用することはできません。

em: ブラウザーが間違った参照サイズを使用することがありますが、相対単位の中で最も問題が少ないものです。ただし、場合によっては px と解釈されることがあります。

pt: 解像度によって大きく異なるため、表示には使用しないでください。ただし、印刷での使用には非常に安全です。

px: 画面上で唯一信頼できるアブソリュート単位。ただし、1 つのポイントは通常複数のピクセルで構成されているため、印刷物では間違って解釈される可能性があるため、すべてが途方もなく小さくなります。

于 2008-09-25T11:20:13.903 に答える
13

両方とも、以前のフォントサイズに対して相対的にフォントサイズを調整します。1.5em は 150% と同じです。唯一の利点は読みやすさのようです。最も快適なものを選択してください。

于 2008-09-25T11:21:14.353 に答える
6

(ほぼ?) すべてのブラウザーがテキストだけでなくページ全体のサイズを変更するようになったことを考えると、アクセス可能なフォントのサイズ変更に関するpxvs. %vs. ems に関する以前の問題は、かなり意味がありません。

したがって、答えは、おそらく問題ではないということです。あなたに合ったものを使用してください。

%相対的なサイズ変更ができるので便利です。

pxそれを使用するときの期待を管理するのはかなり簡単なので、素晴らしいです。

emテキストサイズに比例したサイズ変更ができるため、レイアウト要素にも使用すると便利です。

于 2009-11-12T16:22:23.833 に答える
0

Galwegian が言及しているように、Web タイポグラフィでは px が最も信頼性が高く、ページで行う他のすべての操作はほとんどコンピューター モニターを参照してレイアウトされます。絶対サイズの問題は、一部のブラウザー (IE) が Web ページのピクセル値要素をスケーリングしないため、ズームイン/ズームアウトしようとすると、それらの要素を除いてすべてが調整されることです。

IE8 がこれを適切に処理するかどうかはわかりませんが、他のすべてのブラウザー ベンダーはピクセルを適切に処理しており、ユーザーがテキストを拡大/縮小する必要があるケースはまだ少数です (SO のこのテキスト ボックスはおそらく例外です)。本当に汚いものにしたい場合は、テキストサイズを大きくするための JavaScript 関数をいつでも追加して、ユーザーに「小さい」/「大きい」ボタンを提供できます。

于 2008-09-25T11:23:54.003 に答える
0

%cssユニットとの違いについてem。

私が理解している限り (少なくとも理論的/概念的には可能ですが、これら 2 つのユニットがブラウザーでどのように実装されるかは不明です)、これら 2 つのユニットはem同等です。100em%

実際に em と % の間に本当の違いがある場合、誰かがそれを説明できますか (または説明へのリンクを提供できますか) ?

（私はこのコメントをそれが属する場所に追加したかった、つまり"Liam, answered Sep 25 '08 at 11:21"、彼の回答が反対票を投じられた理由も知りたいので、回答のすぐ下にインデントしましたが、コメントをそこに置く方法がわからなかったため、書く必要がありましたこの「スレッドグローバル」応答)

于 2012-12-12T12:52:20.780 に答える
-1

Yahooユーザーインターフェイスライブラリ（http://developer.yahoo.com/yui/）には、ブラウザ固有の設定を「リセット」するために使用される基本cssクラスの優れたセットがあり、サイトを表示するための基礎がすべてで同じになります（サポートされています）ブラウザ。

YUIでは、パーセンテージを使用することになっています。

于 2008-09-25T12:04:25.920 に答える