web-dev-qa-db-ja.com

emフォントサイズ単位とは何ですか？ピクセル単位でいくらですか？

emユニットとは何か、ピクセル（px）に変換したときの1emの大きさを知りたい。また、いくつかのIEバグについても読みました。どのbody font-sizeを何かに設定する必要があるかを克服するために、あまり従うことができませんでした。誰かが詳細に説明できますか？

cssfont-sizeem
36
sushil bharwani

他の場所で読むことができますが、emとpxの間にはno直接的な関係があります。

リンクの状態の1つとして：

「em」値は、大文字のMの幅に基づいています

したがって、フォントごとに異なることになります。幅の狭いフォントは、拡張フォントと同じ高さ（px）を持つ場合がありますが、emサイズは異なります。

3年後の編集：

現在、1em =フォントサイズ（px）であると言う多くのソースがあります。つまり、font-size:16px、1em = 16px。これはまだAdobeのソース（1em = ptのフォントサイズ）と一致しませんが、どちらの場合も奇妙に見えます。 emサイズは、圧縮フォントでは大きすぎ、拡張フォントでは小さすぎます。

いくつかのテストページを作成し、自分で確認します。

また：

誰も（私を含めて）実際に質問に答えていないことがわかります（これは隠されていました）。

また、いくつかのバグについてどこかを読んで、それを克服するために、ボディのフォントサイズを何かに設定しました

このページ に従って、これをcssに追加する必要があります：html{ font-size:100%; }。そのページは6年前であり、何百ものコメントを読んでいません。そのため、それがまだ関連性があるかどうかはわかりません。

38
egrunin

Emは文字Mに基づいており、フォントに依存しているというM原則は、よく言われる神話です!! W3c em documentation emsとピクセルがどのように関係するかを正確に非常に簡潔に説明しています。文字Mを使用してフォントサイズを計算することは、少なくとも非常に複雑で不必要です。

「em」単位は、使用される要素の「font-size」プロパティの計算値に等しくなります。例外は、 'font-size'プロパティ自体の値に 'em'が発生する場合です。この場合、親要素のフォントサイズを参照します。垂直または水平測定に使用できます。

ここに顕著なポイントがあります。

  1. 祖先の拡大なしでは、1emはピクセルのfont-size属性とまったく同じです。

  2. X-emsまたはx-percentを使用した祖先の拡大は、明らかな比率xまたはx/100を乗算するだけです。したがって、単純なJavaスクリプトループは、以下を前提として正確なフォントサイズを計算します。（1）JavaスクリプトをフラストレーションさせるC.S.Sはありません。 （2）一部の祖先のフォントサイズは絶対単位で設定されています。これは、ドキュメントが話している計算値です。手計算ではC.S.S.を回避できますが、祖先チェーン内に絶対単位を見つける必要があります。

  3. Emsは幅を測定するため、1000emsの長さのdivを作成し、client-Widthプロパティを1000で除算することにより、常に正確なフォントサイズを計算できます。

  4. Emは実際のフォントではなくfont-size属性に基づいているため、おそらくM原理が失敗するフォントを作成できます。 Mが他の文字の3分の1のサイズで、フォントサイズが10ピクセルの奇妙なフォントがあるとします。ピクセルのフォントサイズは何らかの方法で最大の文字の高さを保証するので、Mは10ピクセル、他のすべての文字は30ピクセルにならないでしょうか？

警告

  1. （2）の主な注意点は、exユニットの相対比が非常に不安定であることです。一定のフォントを使用する同じブラウザーでは、相対的な比率はフォントサイズによって変化します。ジョージアなどの同じフォントサイズとブラウザセーフフォントでも、exの相対比率はブラウザによって異なります。これは、適合性が必要な場合にexユニットを使用しないという非常に良い理由です。 exユニットを使用すると、祖先チェーンを介してフォントサイズを計算することはできません。
18
Mark Willis

ボディのフォントサイズに関係なく計算されます。ピクセルからemへのコンバーターを使用して、サイト上にあるものを正確に調べることができます。

PxToEm

5
TALLBOY

emは、元々は印刷されたタイポグラフィで使用される測定値です（ウィキペディアによる）。考慮すべき事項を次に示します。emが12ptタイプとして定義されている場合、emは印刷ページの12/72インチです。ただし、emを16pxとして定義した場合、インチ単位の幅はメディアの解像度に依存します。 （注：モバイルデバイスの出現前は、72ppiから120ppiの解像度が「安全なブラウザ」標準と見なされていました。）したがって、ユーザーが300px幅のデバイスを使用している場合、16pxの1emは多くの「不動産」です。私の意見では、emの測定値を最大限に活用することは、ページのレイアウトや配置ではなく、空白のバランスを効果的にとるためにテキストの段落を定義することです。

4
Hap Jewell

文字「M」にちなんで名付けられたemユニットは、横幅の測定に使用されてきたタイポグラフィの長年の伝統を持っています。たとえば、アメリカのテキスト（-）によく見られる長いダッシュは、歴史的に文字「M」と同じ幅であるため、「em-dash」として知られています。ヨーロッパのテキストでよく見られるより狭いいとこ（-）は、同様に「ダッシュ」と呼ばれます。

「em」の意味は年々変化しています。すべてのフォントに文字「M」が含まれるわけではありませんが（中国語など）、すべてのフォントには高さがあります。したがって、この用語は、文字「M」の幅ではなく、フォントの高さを意味するようになりました。

「驚くべきemユニットとその他のベストプラクティス」から https://www.w3.org/WAI/GL/css2em.htm

3
John Doe

EMは、フォントのポイントサイズに比例する測定単位です。

2
simshaun

このリンクはあなたを助けることができます http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

その記事から引用したように：

1emはalwaysが親要素のフォントサイズに等しいことを知っているため、

1 ÷ parent font-size × required pixel value = em value

ブックマークの場合： ピクセルからemsへの変換テーブル フォントサイズ。

2
leivajd

emはパーセンテージとほぼ同じです。 http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ を読むことをお勧めします

1
Tom Vervoort