30
  • ブラウザ間でテキストのサイズを変更する最良の方法は何ですか?
  • フォントサイズをピクセル/emで定義することの長所と短所は何ですか?
4

12 に答える 12

29

どちらを使用しますか？

両方。ユーザーが大量に読まなければならない本文テキストに対する相対値 (ユーザーが快適に読めるようにする必要があるため)。画像など、ピクセル単位でサイズ変更されたページ上の他の要素と一致するようにサイズ変更する必要があるテキストの場合は絶対です。

相対的には、'%' と 'em' が同等に適しています。

絶対値の場合は、常に「px」を使用してください。画面上で使用する場合は決して「pt」を使用しないでください。これは、印刷スタイルシートでのみ使用できます。'pt' がフォント処理のデフォルトの単位と見なされているのは残念です。Web では最悪の選択だからです。

(ETA: この回答以降、CSS3 はとが常に比例するように「物理単位」を再定義したことに注意してください。そのため、非常に古いブラウザーを気にしない限り、この問題はもはや問題になりません。)pxpt

相対的なフォント サイズの「複合」効果を好まない人もいます。実際の秘訣は、入れ子が多すぎないように、フォントサイズの変更をできるだけ少なくすることです。font-size キーワード 'small'/'medium'/'xx-large'/etc. を使用することで、複合動作を行わずに、ユーザーの優先サイズに対する相対サイズの動作を取得できるはずですが、残念ながらその方法では細分性があまり得られず、今日でもブラウザーがそれらを処理する方法には違いがあります.

于 2009-02-06T19:36:53.633 に答える
22

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

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

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

于 2009-02-06T16:26:33.407 に答える
10

個人的には絶対フォントサイズを設定し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 つの定義を変更するだけで、すべてのテキストのサイズを簡単に拡大または縮小できることです。

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

于 2009-02-06T16:22:30.437 に答える
6

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

于 2009-02-06T16:33:45.593 に答える
4

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

于 2009-02-06T16:22:29.953 に答える
2

人々が使用していることの 1 つは、本文の CSS で基本フォント サイズ (例: 12pt) を定義し、他のすべてのフォント サイズはそのパーセンテージ (例: タイトルの場合は 140%、小サイズの場合は 80% など) です。

ptを使用すると、ユーザーの設定DPIに基づいて表示に違いが生じますが、おそらくユーザーの制御下にあります。

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

Em と pt は印刷用の CSS に適しています。

たくさんのことをして、フォントと CSS について何が起こるか見てみましょう。

于 2009-02-06T16:23:37.347 に答える
2

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

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

于 2009-02-06T16:27:42.500 に答える
2

ピクセルは固定サイズです。つまり、どの画面や解像度で表示しても、テキストは常に同じサイズになります。

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

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

相対的なフォント サイズは、Web サイトが自分のデザインと正確に対応していないことに腹を立てる無知なデザイナーを苛立たせる傾向があります。

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

于 2009-02-06T16:28:01.953 に答える
2

EM スケーリングを使用すると、フォントをより柔軟に使用できます。また、よりアクセスしやすくなっています。

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

于 2009-02-06T16:31:43.867 に答える
1

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

于 2009-02-06T16:21:58.020 に答える
0

私のプログラミングのバックグラウンドのほとんどはデスクトップ アプリケーションですが、最近 Web 開発に関するかなりの量の本を読んでいます。私が出会った本では、キーワードのフォント サイズ仕様 (小、中など) を使用し、それを拡大または拡大することを提案しています。パーセンテージまたはemでダウン。

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

ただし、フォント サイズをキーワードで指定すると、IE5 にも問題が生じます。IE5 では、他のブラウザと比較して、テキストが 1 段階大きく表示されます。

于 2009-02-06T16:37:57.893 に答える