Webdesign-Kenntnisse: Hohe Rankingprobleme bei gemischten chinesischen und englischen Webseiten

Webdesign-Kenntnisse: Hohe Rankingprobleme bei gemischten chinesischen und englischen Webseiten
<br />Ich werde mit diesem Problem im Grunde verrückt. Die Symptome sind wie folgt

Symptombeschreibung: Wenn im Internet Explorer (6, 7 oder 8 habe ich nicht ausprobiert) Chinesisch und Englisch gemischt werden, die Standardschriftart verwendet wird und die Li-Liste für Float verwendet wird, tritt das obige Symptom auf und der Text wird nicht vertikal ausgerichtet. Dies wirkt sich auf die Ästhetik des Layouts aus. Der Grund für die Situation im obigen Bild ist, dass die Grundlinien chinesischer und englischer Texte unterschiedlich sind. Die untere Kante der Schriftart Arial ist ein Pixel niedriger als die der Schriftart Song (beide haben Größe 12) und die obere Kante ist zwei Pixel niedriger als die der Schriftart Song. Darüber hinaus gibt es im Englischen auch i und y, die unterschiedliche obere und untere Grundlinien haben. Wenn Chinesisch und Englisch gemischt und ausgerichtet werden, entsteht daher ein deutlicher Höhenunterschied, der das Layout ungleichmäßig macht. Siehe vergrößertes Bild.

Verwenden Sie die Schriftart Song für chinesischen und englischen Text

Dies kann das Problem falsch ausgerichteter Texte lösen, aber Times New Roman ist eine Serifenschriftart (Times New Roman ist auf Englisch eine Serifenschriftart). Die Schrift ist kompakt und hat viele Details. Sie ist sehr auffällig, wenn sie zusammen angeordnet ist, aber wenn sie kontinuierlich geschrieben wird, kann es leicht zu Erkennungsschwierigkeiten kommen und man liest die falsche Zeile. Weitere Informationen zu den Vor- und Nachteilen von Serifenschriften finden Sie in diesem Artikel. Im Gegensatz dazu sind serifenlose Schriftarten schöner und eleganter, wenn sie zur Darstellung von Englisch verwendet werden.
Lösung 1: Die Entdeckung der „Knödel“-Kinderschuhe.
Englisch verwendet die Schriftart Tahoma – Vergleich der Schriftarten Song, Arial und Tahoma – Arial und Tahoma Sans Serif-Schriftarten sind feiner

Bei Verwendung von Tahoma-Schriftarten für gemischten chinesischen und englischen Text

Die Zeilenhöhen der gemischten Kombinationen aus Chinesisch und Englisch und rein chinesischem Text sind konsistent, aber die Unterstreichung von a wird an den chinesischen Text angehängt, wenn dieser sich im Schwebezustand befindet.
Fehler: Bei Verwendung der Schriftart Tahoma in IE6 und früheren Versionen bleibt die Unterstreichung aller Links zu chinesischen Schriftarten an der Schriftart hängen. Auch Taobao nutzt diese Lösung. Ich bin der Meinung, dass es sich bei großen Projekten, bei denen verschiedene Personen zusammenarbeiten, um ein Seitenmodul fertigzustellen, lohnt, die Schriftart stärker zu standardisieren, Fehlausrichtungen unter einheitlichen Spezifikationen zu reduzieren und die Schriftart Tahoma mit Unterstreichungen zu verwenden, die an der Schriftart festzukleben scheinen.
Folgendes habe ich bei meinen Freunden festgestellt :
Für Englisch wird die Schriftart Arial und für Chinesisch die Schriftart Song verwendet. Sie können im <a>-Tag „line-height:1.231“ angeben, um das Problem ungleicher Zeilenhöhen und des Aneinanderklebens von Schriftart und Unterstreichung zu lösen. (Ich weiß nicht, ob dies auf einen groß angelegten Mischsatz aus Chinesisch und Englisch anwendbar ist. Dies bedarf weiterer Überprüfung.)

Zusammenfassung: Danke für den Reis, danke für die Knödel, danke für YUI und danke für Taobao!

<<:  MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

>>:  Ein Artikel, der Ihnen hilft, die Grundlagen von VUE zu verstehen

Artikel empfehlen

Detailliertes Beispiel für die Verkettung mehrerer Felder in MySQL

Das Zusammenführen von Zeilen- und Feldergebnisse...

Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)

Als Baidu diese Anforderung erhielt, fand das Unt...

Verwendung des Linux-Befehls chkconfig

1. Befehlseinführung Der Befehl chkconfig wird zu...

So installieren Sie den Kibana-Tokenizer im Docker-Container

Schritt: 1. Erstellen Sie eine neue Datei docker-...

Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln

1. Methode zum Festlegen des Fremdschlüssels 1. U...

Eine kurze Analyse der Verwendung der Zero-Copy-Technologie in Linux

In diesem Artikel werden mehrere wichtige Zero-Co...

HTML-Formular_PowerNode Java Academy

1. Formular 1. Die Rolle des Formulars HTML-Formu...

So lösen Sie das Problem des verstümmelten DOS-Fensters in MySQL

Das Problem mit dem verstümmelten Code ist folgen...

Einfache Analyse von EffectList in React

Inhaltsverzeichnis EffectList-Sammlung Effektlist...

CSS-Methode zum Löschen von Float und BFC

BFC BFC: Blockformatierungskontext BFC-Layoutrege...

Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler

Fehlermeldung: Die Store-Update-, Insert- oder De...