私は自分のhtmlにcssファイルを使用しています。
私の質問は、フォントサイズのパーセンテージを設定する必要がありますか? 100% に設定する必要がありますか、それとも気にせず、使用することさえしないでください。
BODY {font-family: Verdana, sans-serif ; font-size: 90%;}
などの他のタグにもこのフォントサイズを設定していますTD, LI, TH, TABLE...
自分のコンピュータでフォントが適切に見えるように変更すると、他の人が私の Web ページを見たときに正しい設定にならないのではないかと心配です。
この設定で推奨される方法は何ですか? 100%のままにしますか?
ありがとうございました
いきなりの回答で申し訳ありませんが...
既存の回答であなたが抱えている問題は、100%実際に何を意味するのか、そもそもCSSでフォントサイズがどのように得られるのかについての誤解である可能性があると思います. ここでは、私の長くて単純すぎる説明をご容赦ください。
要素にフォント サイズを設定する場合、次の 2 つの方法のいずれかで行うことができます。相対的または絶対的。相対値は や などの単位で定義され、絶対値は%やなどの単位で定義されます。使用できる単位は他にもありますが、ほとんどは Web タイポグラフィにはまったく関係ありません。（実際、それは関係のないものの1つであると私は主張します）。empxptpt
絶対値を定義すると、指定したフォントがそのサイズで表示されます。だいたい。ブラウザ、オペレーティング システム、およびユーザー設定によって、これらの値が乱れる可能性があります。したがって、a を設定したからといっfont-size: 16px;て、フォントのサイズが 16 ピクセルになるわけではありません。
ただし、ページ上の他の要素のサイズをピクセル単位またはそれらに対する相対単位で定義している場合は、設定したサイズが 16 ピクセルであるかのように設計しても、通常は安全です。
相対値は相対的ですが、何に対してでしょうか? サイズをまったく指定しなかった場合はどうなるでしょうか。
この「既定のサイズ」に影響を与える 2 つの要因: ブラウザーの既定のフォント サイズ (以前の回答で16pxこの既定のサイズについて言及されています。確認も否定もできません。依存することはありません)、または有効な CSS 継承規則です。
bodyでフォント サイズを 10 ピクセルにする (小さすぎる、IMO!) と定義すると、既定では、すべての子孫 HTML タグが同じサイズを使用することになります。例外もあります。すべてのブラウザーが常にデフォルトと継承でうまく機能するわけではありません! しかし、最新のブラウザのほとんどはそうです。
divで font-size を と定義する200%と、結果は20pxこの場合になります。これは、html 階層から継承された 10px のサイズを 200% に設定して 20px に変更したためです。2em に設定しても同じ結果が得られます。(パーセントを 100 で割るemことで「変換」できます)%
では、ページのルート要素には何を設定すればよいでしょうか? 100%? 90%? 私の意見では、どちらでもありません。相対値ではなく、明示的な値を設定する必要があります。私はあなたに誓うので、すべてのブラウザが同じ「デフォルト」サイズを提供するとは限りません...
を に設定bodyし16pxます。オペレーティング システム、モニター、ブラウザ、またはその他のものを「拡大」または「縮小」していないことを確認してください。フォントのサイズ変更やその性質のものはありません。そうすれば、テキスト (設定したサイズに関係なく) が、他の人がどのように見えるかに非常に近い形で表示されます。
ほとんどのモニターのピクセルは、ほぼ同じサイズです。ただし、注目すべき例外が 1 つあります。それは、新しい iPad の Retina ディスプレイです。それらのピクセルは、他のほぼすべてのデバイスよりも著しく小さいです。
ユーザーが持っている可能性のあるすべての奇妙なズーム設定に対してサイズを調整することはできませんし、試みるべきではありません。人々が 1px=1px (90% 以上) を閲覧していると仮定して、サイトを適切に設計することができますし、そうすべきです。残りの多くは、視覚的な問題のために、オペレーティング システムまたはブラウザーを拡大 (ズームイン) しています。心配しないでください。彼らはほとんどのウェブサイトのテキストを読むことができないので、そうしました!
16px は、一部のコンテンツの多いサイトで慣れているものよりも大きい可能性がありますが、開始するのに中程度の適切な場所です. サイトを適度に読みやすいものにすることは良いことだと思いますが、トレードオフを念頭に置いてください。テキストが大きくなればなるほど、より多くのユーザーがスクロールしなければならなくなります。そのため、48px のテキストは非常に読みやすいかもしれませんが、ユーザーを苛立たせます。
では、これらのパーセンテージ/ems はどこで機能するのでしょうか?
ドキュメントの「ルート」を確実な絶対数に設定したので、それに基づいて残りのコンテンツを調整できます。多分あなたのh1要素を作ってください。かもしれません。一部のサイトが行っているように、項目内のテキストのサイズを微調整して少し小さくすることもできます。多分それらはそうなるでしょう。ただし、これらのパーセンテージはすべて、絶対数に設定したドキュメントのルートの「ルート」サイズに基づいています。175%h2125%li86%
次に、その1つの単一の値を変更するだけで、相対的なサイズを維持しながら、ドキュメントのテキスト全体のサイズを変更できます: body font-size.
最後に 1 つ:%フォント ファミリーは特定の特定のサイズしかない場合があるため、値の実際のわずかな変化は反映されていないように見える場合があります。したがって、何かを設定したfont-size: 99%場合、おそらくそれよりも小さくなることはありません100%。そこで試行錯誤するしかありません。
しかし、申し訳ありませんが、他のブラウザーや他のユーザーのコンピューターのサイズが、あなたのブラウザー/コンピューターとまったく同じであることに依存することはできません。お使いのコンピューターでは、特定のフォントが 95% で 100% と同じサイズで表示される場合がありますが、私の場合はそれより小さいサイズで表示される場合があります。そのようなことについてあなたができることは何もありません...
最後に言えることは、「Web タイポグラフィへようこそ!」ということだけです。(はい...「たぶん」や「ちょっと」などがたくさんある紛らわしい話題です!)
デフォルトのフォント サイズは です16px。それでよろしければ、わざわざ変更しないでください。font-size: 100%;無駄なコード行です。表示される唯一の違いは、モバイル デバイスです。
100% のフォント サイズを使用しても意味がありません。これは、現在のフォント サイズ (この場合は 16px) を使用することを意味します。サイズの絶対測定にはpx,を使用し、相対測定にはandを使用します。詳細については、このページを参照してください: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ptEm%
また、いろいろなブラウザで試して相性を確認してみると役に立つと思います。