通常、ユーザーに表示されるページのスタイルは 3 つのレイヤーによって制御されます。最初のレイヤーはブラウザーのデフォルト スタイル、2 番目のレイヤーは Web ページ定義のスタイル、3 番目のレイヤーはユーザー定義のスタイルです。 CSS と同様に、後のスタイルは以前のスタイルよりも優先されます。つまり、Web ページ定義のスタイルはブラウザーのデフォルト スタイルをオーバーライドでき、ユーザー定義のスタイルが最も優先されます。実際には、ブラウザは多かれ少なかれユーザー定義スタイルの機能を提供していますが、それをカスタマイズするユーザーはほとんどなく、一般的には上級ユーザーです。ブラウザーのデフォルト スタイルは、ブラウザー、言語バージョン、さらにはシステム バージョンによっても異なることが多く、その結果、デフォルト スタイルを直接使用するページがさまざまなブラウザーで非常に一貫性なく表示されるため、次のような問題が発生します。 YUI のリセットは、ブラウザーのデフォルト設定を書き換えて、各ブラウザーのスタイルの一貫性を確保するために使用されます。
フォントを例に挙げると、各ブラウザのデフォルトのフォント タイプ、フォント サイズ、フォントの行の高さは異なります。たとえば、Windows XP で中国語版の IE8 が Web ページを表示する場合、デフォルトのフォントは Song Diagnostics ですが、これは確かに異なります。英語版の場合はそうではありません。したがって、デザインの一貫性を確保し、開発効率を向上させるために、一貫した表示効果を実現するには、デフォルトのフォント スタイルを統一して設定する必要があります。
将来的には、次のデフォルトのフォント スタイルを使用できるように準備してください。
body{ font: 12px/1.5 arial; }
私たちのページのコンテンツ文字のほとんどは中国語です。Web ページで中国語を表示するために最も一般的に使用され、最も一般的なフォントは間違いなく Song Diagnostic ですが、 Song Diagnostics は英語、数字、英語の記号を表示するのがあまりにも苦手です。 © 文字などの文字が含まれるため、通常は CSS を使用してより適切なフォント スタイルで表示し、Song Diagnostics を使用して中国語と中国語の記号を表示することを想定しています。私がアリアルを選んだ理由は次のとおりです。
tahoma
とhelvetica
それほど幸運ではありません。font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
これは非常に良い選択ですが、 Google、YAHOO、Youtube、Bing、さらには MSN の新しいバージョンでも、最初のデフォルト フォントとしてarial
使用されていることがわかります。したがって、 arial
美しさと読みやすさの点で完全に受け入れられるはずです。font-family:arial,sans-serif;
ですが、少なくとも中国語以外のバージョンでは同様です。 Win7 では、エンコーディングが GBK の場合、IE8 ではsans-serif
により Song フォントがレンダリングされ、フォントが変形してしまいます。これが、Taobao がsans-serif
の前に Song フォントを追加する必要がある理由ですが、Google ではこれを行う必要がありません。font-family:arial;
これによりその安全性がわかります。 Firefox Chinaで表示されるデフォルトの中国語フォントが Microsoft Yahei であることに気付いた人もいるかもしれません。これは、Mouzhi Network がユーザー定義のスタイルを許可なく変更しており、Web ページのスタイルがブラウザーによって設定されたスタイルをオーバーライドすることを許可していないためです。 。同じような状況だからこそ、Webページを柔軟にデザインすることが非常に重要です。英語フォントを最初のデフォルトフォントとして使用することによって発生する問題の 1 つは、中国語、英語、記号が混在している場合の位置合わせの問題です。ほとんどの状況は行の高さと hasLayout を設定することで解決できますが、変更すると完璧にはなりません。フォントを「Song Ti」に変更すると問題は完全に解決します。どうやらこの問題はIEのみで発生するようです。したがって、Web サイトで英語、数字、英語の記号がほとんど使用されない場合は、 {font-family:5b8b4f53;}
を直接設定することも合理的な選択です。
font:13px/1.231 arial,helvetica,clean,sans-serif;
つまり、デフォルトのフォント サイズは 13px、行の高さは 13*1.231=16.003px、デフォルトの行の高さは 1.231 倍です。デフォルトのフォント。中国語の場合、一般的に使用されるフォント サイズは 12px、14px、16px、18px などの偶数サイズです。IE6 および IE7 で行の高さを偶数に設定すると、特殊な場合にフォントの配置の問題を解決できます。line-height
設定するときは、単位 (% を含む) を使用しないように注意してください。子ノードは計算された line-height 値を継承するため、単位を使用すると、ブラウザはline-height
最初に定義された絶対値として計算します。値はフォント サイズが変化しても変化せず、単位のない値はコンテナのfont-size
の倍数であるため、単位のない値に設定することが最良の選択です。line-height
理解するのに非常に役立ち、読む価値があります。arial
が組み込まれています。arial
は基本的に名前が最も短いフォントであり、CSS サイズを節約できます。{font-family:5b8b4f53;}
、Microsoft Yahei を使用する場合は{font-family:5fae8f6f96c59ed1;}
です。 {font-family:5fae8f6f96c59ed1;}
. これにはエンコードの問題を回避できるという利点があり、すべての主要なブラウザで同時にサポートできます。