Normalerweise wird der Stil der Seite, die Benutzer sehen, durch drei Ebenen gesteuert. Die erste Ebene ist der Standardstil des Browsers, die zweite Ebene ist der von der Webseite definierte Stil und die dritte Ebene ist der benutzerdefinierte Stil. Wie CSS haben die späteren Stile eine höhere Priorität als die früheren, was bedeutet, dass auf der Webseite definierte Stile die Standardstile des Browsers überschreiben können und benutzerdefinierte Stile die höchste Priorität haben. Die tatsächliche Situation ist, dass Browser zwar mehr oder weniger die Funktion benutzerdefinierter Stile bieten, aber nur sehr wenige Benutzer diese anpassen, und im Allgemeinen handelt es sich um fortgeschrittene Benutzer. Die Standardstile von Browsern haben oft unterschiedliche Einstellungen in verschiedenen Browsern, unterschiedliche Sprachversionen und sogar unterschiedliche Systemversionen. Dies führt dazu, dass Seiten, die den Standardstil direkt verwenden, in verschiedenen Browsern sehr inkonsistent angezeigt werden, sodass ein ähnliches Problem vorliegt Durch das Zurücksetzen von YUI wird versucht, die Standardeinstellungen des Browsers neu zu schreiben, um die Konsistenz der Stile jedes Browsers sicherzustellen.
Nehmen Sie als Beispiel die Schriftart, die Schriftgröße und die Schriftzeilenhöhe jedes Browsers. Wenn die chinesische Version von IE8 beispielsweise Webseiten unter Windows XP anzeigt, ist die Standardschriftart Song Dynasty Dies gilt jedoch nicht für die englische Version. Daher müssen wir den Standardschriftstil einheitlich festlegen, um konsistente Anzeigeeffekte zu erzielen, die Designkonsistenz sicherzustellen und die Entwicklungseffizienz zu verbessern.
Bereiten Sie sich darauf vor, in Zukunft den folgenden Standardschriftstil zu verwenden:
body{ font: 12px/1.5 arial; }Die meisten Inhaltszeichen auf unseren Seiten sind auf Chinesisch. Es besteht kein Zweifel daran, dass Song Dynasty die am häufigsten verwendete und gebräuchlichste Schriftart für die Darstellung von Chinesisch auf Webseiten ist, aber Song Dynasty ist zu schlecht darin, Englisch, Zahlen und englische Symbole anzuzeigen . B. das ©-Zeichen, daher gehen wir im Allgemeinen davon aus, dass wir sie über CSS mit besseren Schriftstilen anzeigen und dann Song Dynasty verwenden, um Chinesisch und chinesische Symbole anzuzeigen. Der Grund, warum ich mich für Arial entschieden habe, ist folgender:
tahoma und helvetica haben nicht so viel Glück.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
Dies ist eine sehr gute Wahl, aber Sie werden auch feststellen , dass neue Versionen von Google, YAHOO, Youtube, Bing und sogar MSN arial als erste Standardschriftart verwenden. Daher sollte arial hinsichtlich Schönheit und Lesbarkeit völlig akzeptabel sein.font-family:arial,sans-serif; zumindest jedoch in der nicht-chinesischen Version Wenn Win7 die Codierung GBK ist, rendert IE8 die Song-Schriftart aufgrund von sans-serif , was dazu führt, dass die Schriftart deformiert wird. Aus diesem Grund muss Taobao die Song-Schriftart vor sans-serif hinzufügen, Google muss dies jedoch nicht tun.font-family:arial; was die Sicherheit dieser Vorgehensweise verdeutlichen kann. Einige Leute haben möglicherweise bemerkt, dass die in Firefox China standardmäßig angezeigte chinesische Schriftart Microsoft Yahei ist. Dies liegt daran, dass Mouzhi Network den benutzerdefinierten Stil ohne Genehmigung geändert hat und nicht zulässt, dass der Stil der Webseite den vom Browser festgelegten Stil überschreibt . Auch aufgrund ähnlicher Situationen ist es für uns sehr wichtig, Webseiten flexibel zu gestalten. Eines der Probleme, die durch die Verwendung englischer Schriftarten als erste Standardschriftart entstehen, ist das Ausrichtungsproblem, wenn Chinesisch, Englisch und Symbole gemischt werden . Die meisten Situationen können durch Festlegen der Zeilenhöhe und des hasLayout gelöst werden, aber es wird nicht perfekt sein, wenn Sie es ändern Durch Ändern der Schriftart in „Song Ti“ kann das Problem vollständig gelöst werden. Anscheinend tritt dieses Problem nur im IE auf. Wenn Ihre Website daher selten Englisch, Zahlen und englische Symbole verwendet, ist die direkte Einstellung {font-family:5b8b4f53;} ebenfalls eine sinnvolle Wahl.
font:13px/1.231 arial,helvetica,clean,sans-serif; das heißt, die Standardschriftgröße beträgt 13px, die Zeilenhöhe beträgt 13*1,231=16,003px und die Standardzeilenhöhe beträgt das 1,231-fache die Standardschriftart. Für Chinesisch sind die am häufigsten verwendeten Schriftgrößen 12 Pixel, 14 Pixel, 16 Pixel, 18 Pixel und andere gerade Größen. Durch Festlegen der Zeilenhöhe auf eine gerade Zahl in IE6 und IE7 kann das Problem der Schriftausrichtung in einigen Sonderfällen gelöst werden.line-height darauf, keine Einheiten (einschließlich %) zu verwenden, da die untergeordneten Knoten den berechneten Zeilenhöhenwert erben. Wenn Sie also Einheiten verwenden, berechnet der Browser line-height als ersten definierten Wert Der Wert ändert sich nicht, wenn sich die Schriftgröße ändert, und der Wert ohne Einheit ist ein Vielfaches font-size des Containers. Daher ist die Einstellung auf einen Wert ohne Einheit die beste Wahl.line-height und lohnt sich zu lesen.arial um die Suchzeit im Browser zu verkürzen.arial ist im Grunde die Schriftart mit dem kürzesten Namen, wodurch CSS-Größe eingespart werden kann.{font-family:5b8b4f53;} und bei Verwendung von Microsoft Yahei ist es {font-family:5fae8f6f96c59ed1;} Dies hat den Vorteil, dass Codierungsprobleme vermieden werden, und kann von allen gängigen Browsern gleichzeitig unterstützt werden.