Erfahrung im chinesischen CSS-Schriftsatz

Lernen Sie mehrere Monate lang Webstandards und entwerfen und produzieren Sie Webseiten gemäß den Standards. Ich wollte schon immer etwas schreiben und meine eigenen Erfahrungen ordnen. Dieser Artikel ist hauptsächlich für den chinesischen Schriftsatz geschrieben. Der englische Schriftsatz wird selten erstellt und ist daher nicht erforderlich.

Zunächst stellen wir relativ einfache Anwendungen vor, z. B. das Festlegen von Schriftarten, Farben, Größen und Absatzleerzeichen. Später stellen wir Dinge wie Initialen und Einzüge in der ersten Zeile vor. Abschließend werden wir über einige häufig verwendete chinesische Layouts auf Webseiten sprechen, z. B. das Abschneiden chinesischer Schriftzeichen, den Zeilenumbruch mit fester Breite (Wortumbruch und Wortumbruch) usw. Da ich nur einige Anwendungserfahrungen schreibe, lesen Sie bitte das CSS-Handbuch, wenn Sie eine vollständige Einführung in die CSS-Eigenschaften benötigen.

1. So legen Sie die Schriftart, Farbe und Größe des Textes fest – verwenden Sie die Schriftart

Schriftart, um Kursivschrift festzulegen, z. Stil: kursiv;

Schriftstärke legt die Textstärke fest, z. B. Schriftart: fett;

Schriftgröße legt die Textgröße fest, z. B. Schriftgröße: 12px; 9pt, unterschiedlich. Informationen zu Problemen mit der Einheitenanzeige finden Sie im CSS-Handbuch)

line-height legt den Zeilenabstand fest, z. B. line-height: 150%;

color legt die Textfarbe fest ( beachten Sie nicht die Schriftfarbe), z. B. Farbe: Rot;

Schriftfamilie legt die Schriftart fest, z. B. Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, Sans- Serif; (dies ist eine gängige Schreibmethode)

Alle oben genannten können in einer Zeile mit Schriftattributen geschrieben werden (mit Ausnahme des Farbattributs, das separat geschrieben werden muss):

Schriftart : kursiv fett 12px/150% „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, serifenlos text-align

Chinesischer Absatz verwendet

-Tags, Ränder können links und rechts verwendet werden (entspricht Einzug) und die Leerzeichen vor und nach Absätzen. Zum Beispiel:

Die Ausrichtungsmethode für Text ist Textausrichtung, zum Beispiel:

p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 
}

Die Ausrichtungsmethoden umfassen Links, Rechts und Blocksatz ( beide Enden ausrichten) )

PS: Apropos Rand: Ich bin es gewohnt, beim Schreiben von CSS „margin: 0;“ zu definieren, da es manchmal zu Seitenlayoutproblemen kommt, die durch den Standardrandwert verursacht werden, und das kann ich Ich kann den Grund nicht finden (Achten Sie besonders auf Tags wie ul/ol/p/dt/dd)

p{ 
text-align: center; /*居中对齐*/ 
}

3. Vertikaler Text – verwenden Sie den Schreibmodus

Das Schreibmodus-Attribut hat zwei Werte: lr-tb und tb-rl. Ersteres ist die Standardeinstellung links-rechts, oben-unten und letzteres ist oben-unten, rechts-links .

Zum Beispiel:

kann mit Richtungslayout kombiniert werden.

p{ 
writing-mode: tb-rl; 
}

4. Problem mit Aufzählungszeichen – Verwendung des Listenstils

In CSS umfassen Aufzählungszeichen Scheibe (durchgezogener Punkt), Kreis (offener Kreis), Quadrat (durchgezogenes Quadrat), Dezimalzahl (arabische Ziffern), niederromanische (römische Kleinbuchstaben), obere römische (römische Großbuchstaben), Kleinbuchstaben (englische Kleinbuchstaben), Großbuchstaben (englische Großbuchstaben), keine (keine). Stellen Sie beispielsweise die Aufzählungszeichen einer Liste (ul oder ol) auf Quadrate ein, z. B.:

Darüber hinaus hat der Listenstil auch einige Werte. Sie können beispielsweise einige verwenden Kleine Bilder als Aufzählungszeichen. Schreiben Sie einfach die URL („Bildadresse“) direkt unter Listenstil. Beachten Sie, dass Aufzählungszeichen mit list-style-position: Outside (der Standardwert ist Outside) nicht angezeigt werden, wenn der linke Rand einer Elementliste auf Null gesetzt ist. Leider scheinen die oben genannten Aufzählungszeichen die Größe nicht einstellen zu können, und die Punkte und Quadrate sind immer gleich. Und die vertikale Ausrichtung kann nicht eingestellt werden.

li{ 
list-style: square; 
}

5. Initiale – Verwendung: Erstbuchstabe

Pseudoobjekt: Erstbuchstabe kann mit Schriftgröße und Float Create verwendet werden ein Drop-Cap-Effekt. Zum Beispiel:

6. Einrückung der ersten Zeile – verwenden Sie text-indent

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

Text -indent kann die erste Zeile im Container um eine bestimmte Einheit einrücken. Zum Beispiel stehen in chinesischen Absätzen normalerweise zwei chinesische Schriftzeichen vor jedem Absatz. Sie können so schreiben:

Wenn die Schriftgröße 12 Pixel beträgt, wird text-indent: 2em um 24 Pixel eingerückt.

p{ 
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/ 
}

7. Informationen zur chinesischen phonetischen Notation – Ruby-Tags und Ruby-Align-Attribute verwenden

Zum Beispiel können Sie Ruby-Align verwenden um die Ausrichtung festzulegen. Dies ist im CSS-Handbuch zu sehen. Weitere Informationen finden Sie im Ruby-Align-Element.

8. Abschneiden chinesischer Zeichen mit fester Breite – Textüberlauf verwenden

Verwenden der Hintergrundsprache, um den Feldinhalt in der Datenbank abzuschneiden, Schneiden Sie beispielsweise 12 chinesische Schriftzeichen ab (verwenden Sie anschließend Ellipsen). Manchmal ist es jedoch erforderlich, HTML-Tags usw. zu filtern. Bei der Verwendung von CSS zur Steuerung tritt dieses Problem jedoch nicht auf. Wenden Sie beispielsweise den folgenden Stil auf eine Liste an:

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断，不能处理多行。 

9、固定宽度汉字（词）折行 —— 使用word-break 

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：

南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海

值得注意的是里面的空格不能以 代替（最少要有一个软空格）。