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

So zeigen Sie laufende Hintergrundprogramme in Linux an und beenden sie

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

So zeigen Sie laufende Hintergrundprogramme in Linux an und beenden sie

Beschreibung der Standardtransaktionsisolationsebene von MySQL und Oracle

JS-Implementierung eines Karussellbeispiels

So entfernen Sie die Kopfzeile aus der Elementtabelle

Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster

Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung

So installieren Sie MySQL mit Yum auf Centos7 und stellen eine Remote-Verbindung her

Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt

Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu

So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8

Artikel empfehlen

Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen

Umfassende Analyse des MySql-Master-Slave-Replikationsmechanismus

Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS

Berechnete Eigenschaften und Listenerdetails

Analyse des Ereignisschleifenmechanismus von js

SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank

Erste Schritte mit Front-End-Vue-Unit-Tests

25 Beispiele für Website-Design im Nachrichtenstil

So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

vue-element-admin global laden warten

Detaillierte Erläuterung von drei Möglichkeiten, Docker-Container miteinander zu verbinden

So sortieren Sie eine Zeile oder Spalte in MySQL