Lösung des Problems gleichbreiter Leerzeichen im CSS-Browser_Experience-Austausch

Aber es ist nicht sehr zuverlässig. Wenn der Leerzeichenabstand beispielsweise sehr groß ist, müssen wir mehrere Platzhalter hinzufügen, und die Seitengröße wird sehr groß.

Beachten Sie gleichzeitig, dass die Breite in Safari die Leerzeichenbreite des eingestellten Zeichens ist (Safaris Standardschriftart ist Times), was bedeutet, dass ein chinesisches Zeichen zwei Platzhalter erfordert.

Die konkrete Situation ist im Bild unten dargestellt:

Eigentlich handelt es sich hierbei nicht um ein Safari-Problem, sondern um ein Schriftartenproblem. Die Lösung besteht darin, die folgenden Attribute zu verwenden

font-family: '宋体'; Stellen Sie die Standardschriftart von Safari auf eine chinesische und englische Schriftart gleicher Breite ein, z. B. „宋体“, um das Problem zu lösen. Für die Windows-Version der Safari-Schriftarteinstellungen müssen Sie direkt einen Namen wie das chinesische „Songti“ anstelle von „Simsun“ verwenden (Brüder, die den Grund kennen, sagen Sie mir bitte).

Aber bisher ist unser grundlegendes Ziel nicht gelöst, nämlich ob wir die Verwendung von Platzhaltern wie vermeiden und „native“ Leerzeichen verwenden können. Betrachten Sie die entsprechenden CSS-Eigenschaften für Leerzeichen, erfahren Sie mehr über die Verwendung von Leerzeichen und der nächste Schritt wird einfacher zu handhaben sein.

Zusammenfassend gibt es zwei Bedingungen für die Verwendung von Leerzeichen, um Leerzeichen gleicher Breite zu erreichen. Entsprechende Attribute müssen gesetzt werden

white-space: pre;

Dann legen Sie Zeichen gleicher Breite fest (einschließlich Leerzeichen gleicher Breite). Um es zusammenzufassen: Das ist es

Schriftfamilie: '宋体', Simsun;
Leerzeichen: pre;

Da chinesische CSS-Namen verwendet werden, muss die Zeichenkodierung des Stils bei der tatsächlichen Verwendung berücksichtigt werden. Gleichzeitig muss zusätzlich berücksichtigt werden, ob der Apple-Rechner über „Songli“ (oder andere gleichbreite Schriftarten) verfügt. Brüder, die Apple-Rechner haben, helfen Sie bitte beim Testen.

--Split--

Vielen Dank an Xiaoma für die Bereitstellung einer weiteren Idee, nämlich die Verwendung von EM-Einheiten. Einfach ausgedrückt kann 1em als die Breite eines Zeichens betrachtet werden; .5em ist ein halbes Zeichen. Dann kann die obige Situation so geschrieben werden.

Buy宝贝：

Mein Taobao:

社Zone:

Das entsprechende CSS für

sollte

sein

.half-word {width: .5em;}
.two-word{width:2em;}

Nach Prüfung bestanden.

--Split--

Was die beiden oben genannten unterschiedlichen Methoden betrifft, denke ich persönlich, dass sie entsprechend der tatsächlichen Situation in Betracht gezogen werden sollten. Beispielsweise fügt die erste Methode, obwohl sie auf einer bestimmten Schriftart mit fester Breite basiert, keine weiteren zusätzlichen Strukturen hinzu, was für die zukünftige Wartung praktischer ist. Die zweite Methode berücksichtigt stärker die tatsächliche Anwendungssituation (und benötigt diese nicht). basiert auf einer bestimmten Monospace-Schriftart), fügt aber auch zusätzliche Struktur hinzu.

Unter Berücksichtigung der zukünftigen Wartbarkeit und der Analyse aus „semantischer“ Perspektive wird daher der erste Ansatz empfohlen. In tatsächlichen Bewerbungssituationen, in denen die Bewerbung komplizierter sein muss, entscheiden sich Einzelpersonen für die zweite Variante.