web-dev-qa-db-ja.com

CSSフォントサイズ：相対値と絶対値。どちらを使用しますか？

  • ブラウザ間でテキストのサイズを調整する最良の方法は何ですか？
  • フォントサイズをピクセル/ emで定義することの利点と欠点は何ですか？
htmlcssfontsfont-size
29
Aron Rotteveel

どちらを使用しますか？

どちらも。ユーザーが多く読まなければならない本文テキストの相対（したがって、ユーザーはそれを快適に読めるようにしたいでしょう）。画像などのピクセル単位のページ上の他の要素と一致するサイズにする必要があるテキストの絶対値。

相対的な場合、「％」と「em」は同等に優れています。

絶対的な場合は、常に「px」を使用します。画面での使用に「pt」を使用しないでください。印刷スタイルシートにのみ意味があります。 「pt」がフォント処理のデフォルトの単位と見なされるのは残念ですが、ウェブ上では最悪の選択であるためです。

（ETA：この答え以来、CSS3には redefined の「物理単位」があるため、pxとptは常に比例することに注意してください。非常に古いブラウザが心配です。）

一部の人々は、相対的なフォントサイズの「複合的な」効果を好まない。実際には、入れ子が多すぎないように、フォントサイズの変更をできる限り少なくすることが重要です。 font-sizeキーワード「small」を使用することにより、複合動作なしでユーザーの相対的な優先サイズの動作を取得することが可能ですshould 「中」/「xx-大」/など。ただし、残念ながらそのように細かくすることはできず、ブラウザでの処理方法には現在でも違いがあります。

28
bobince

ユーザーが選択したデフォルトのフォントサイズを保持し、相対的なサイズ設定を使用します。

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

このメソッドは、ユーザーがブラウザで選択したフォントサイズを尊重します。通常、フォントサイズは16pxに設定されています。

22
Philip Morton

個人的に、bodyに絶対フォントサイズを設定し、そこからすべてを相対的なものとして設定しました。例えば：

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

複合された相対サイズを組み合わせないようにしてください：

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

最近のブラウザはすべて、全画面ズームを備えています。つまり、フォントをピクセル単位でサイズ変更しても問題ありません。

この方法の利点は、1つの定義を変更することで、すべてのテキストを簡単にサイズ変更または縮小できることです。

欠点は、デフォルトのフォントサイズを変更したいが、見出し（たとえば）を変更したくない場合、多くの宣言を変更する必要があることです。

10
nickf

List Apartは、さまざまなブラウザでフォントサイズがどのように機能するかについて extensive write up を行いました。 CSSの他のすべてと同じように、予想よりも複雑であることがわかりました。コンセンサスはemsを使用する方向に傾いているようです。これにより、ユーザーはブラウザのフォントサイズの調整をより細かく制御できるようになります。

5
Alex

Internet Explorer（<7？）は絶対値またはピクセル値をスケーリングできないため、相対値を好みます。

4
Gumbo

私が人々が使用しているのを見たことの1つは、ボディCSSでベースフォントサイズ（例えば12pt）を定義することであり、それから他のすべてのフォントサイズはその割合です（例えばタイトルの140％、小さいの80％など）。

Ptを使用すると、ユーザーが設定したDPIに基づいて表示が異なりますが、おそらくユーザーの制御下にあります。

Pxを使用すると、非常に高いDPIデバイスで問題が発生します。

Emおよびptは、印刷用のCSSに適しています。

多くのことを行い、フォントとCSSで何が起こるかを確認します。

2
JeeBee

絶対サイズを使用すると、視覚障害のある読者は読みにくくなる可能性があります。相対サイズを使用する場合は、ページ上の他のテキストよりも大きい/小さいテキストを指定するだけで、すべてが大きい（障害がある場合）または小さい（少し奇妙な場合）ユーザーのデフォルトのテキストサイズに相対的です。

相対的なサイズのテキストの欠点は、Webサイトのサイズを固定したい場合ですが、可能であれば、コンテンツが収まるようにページがサイズ変更されるように、より流動的なデザインにする必要があります。

2
Peter Morris

ピクセルは固定サイズです。つまり、任意の画面と解像度で表示すると、テキストは常にと同じサイズになります。

Emはスケーラブルです。つまり、さまざまな画面サイズと解像度のユーザーがより良いエクスペリエンスを得ることができます。

一部のブラウザでは、固定フォントサイズタイプ（pxおよびpt）のサイズを変更する際に問題が発生するため、一部のユーザーは画面拡大鏡またはマウスホイールのみを使用してフォントのサイズを大きくする必要があるため、Webフォントにはあまり適していません。

相対的なフォントサイズには、Webサイトがデザインに対応していないこと（exactly）にイライラする無知なデザイナーをいらいらさせる癖があります。

私の考えでは、よく知っているべきデザイナーを軟化させるだけでは、Web開発で固定フォントを使用する理由にはなりません。

2
Steerpike

EMスケーリングの使用は、フォントでより用途が広がります。また、よりアクセスしやすくなっています。

これを使用したことがない場合は、 Em Calculator などのツールがタグ/モデルの動作を理解するのに非常に役立ちます。

2
Syntax

相対的なサイズを使用すると、特に大きなビューポートでページをレンダリングし、必要なスペースに収まるように縮小するため、iPhoneなどのモバイルデバイスでページの見栄えが良くなります。

1
Abdullah Jibaly

IE8のサポートを終了できる場合は、remユニットを使用することをお勧めします。これらはemのような相対単位ですが、子要素にカスケードされないため、操作がはるかに簡単になります。

emは複雑です

p {
  font-size: 2.5em;
  span {
    font-size: 1.5 em;
    /* font size comes out to 3.75 root em*/
  }
}

remはより単純です

p {
  font-size: 2.5rem;
  span {
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/
  }
}
1
roo2

私のプログラミングの背景のほとんどはデスクトップアプリケーションですが、最近Web開発のためにかなりの量を読んでおり、出会った本では、キーワードのフォントサイズの仕様（小、中など）を使用して、パーセンテージまたはemでダウンします。

フォントサイズがpxで指定されている場合、IEの古いバージョンのユーザーは、テキストのサイズをオーバーライドできません。つまり、サイズを大きくしたり、好みに合わせて小さくします。

ただし、フォントサイズがキーワードで指定されている場合、IE5でも問題が発生します。他のブラウザに比べて、IE5は1ステップ大きいテキストを表示します。

0
Mark42