CSS font-variant-east-asian Eigenschaft
Die CSS font-variant-east-asian Eigenschaft steuert Glyphenersetzung und Größenanpassung für ostasiatische Schriften. Werte mit Beispielen erklärt.
Die CSS font-variant-east-asian Eigenschaft steuert die Verwendung alternativer Glyphen für ostasiatische Schriften wie Chinesisch, Japanisch und Koreanisch (CJK). Sie ermöglicht die Auswahl zwischen historischen oder regionalen Zeichenformen (zum Beispiel traditionelles vs. vereinfachtes Chinesisch oder verschiedene japanische JIS-Standards) sowie die Steuerung der Breite von Ziffern — ohne den zugrunde liegenden Text zu verändern.
Sie ist eine der CSS3 Eigenschaften und eine der Langformen, die die Kurzschreibweise font-variant bilden.
Wofür wird sie verwendet
Ein einzelner Unicode-Codepunkt kann in der ostasiatischen Typografie mit verschiedenen Glyphen dargestellt werden. Dasselbe Zeichen kann eine historische (traditionelle) und eine moderne (vereinfachte) Form haben, und japanische Schriftarten liefern häufig Glyphen, die einem bestimmten JIS-Standard folgen (jis78, jis83, jis90, jis04). font-variant-east-asian weist die Schriftart an, die passende Variante aus ihren OpenType-Funktionen auszuwählen, sodass die ursprünglichen Zeichen im Markup erhalten bleiben, während die gewünschte Form dargestellt wird.
Verwenden Sie diese Eigenschaft, wenn:
- Sie chinesischen Text anzeigen und traditionelle oder vereinfachte Formen erzwingen möchten, unabhängig davon, welche Zeichen der Autor eingegeben hat.
- Sie einen bestimmten japanischen JIS-Glyphenstandard für Konsistenz benötigen.
- Sie CJK mit lateinischem Text mischen und full-width oder proportionale Ziffernbreiten benötigen, damit Spalten bündig ausgerichtet sind.
- Sie annotierten Text darstellen und kleinere ruby-Glyphenformen verwenden möchten.
Da diese Eigenschaft auf Schriftartfunktionen basiert, ist ein sichtbarer Effekt nur vorhanden, wenn die aktive Schriftart tatsächlich diese alternativen Glyphen enthält. Wenn die Schriftart beispielsweise keine traditionelle Variante besitzt, wird der Text unverändert dargestellt.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.fontVariantEastAsian = "ruby"; |
Syntax
Syntax der CSS font-variant-east-asian Eigenschaft
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Beispiel der font-variant-east-asian Eigenschaft:
Beispiel der CSS font-variant-east-asian Eigenschaft mit dem Wert traditional
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-variant-east-asian: traditional;
}
</style>
</head>
<body>
<h2>Font-variant-east-asian property example</h2>
<h2>大学 → 大學</h2>
</body>
</html>Hier ist die Eigenschaft font-variant-east-asian auf traditional gesetzt. Sie können sie auf einen der in der Tabelle weiter unten auf dieser Seite aufgeführten Werte ändern, einschließlich der Variante simplified. Hinweis: Die Browserunterstützung für diese Eigenschaft ist eingeschränkt. Das Beispiel ist auf Systemschriftarten angewiesen, die traditionelle ostasiatische Varianten enthalten.
Ergebnis
![CSS font-variant-east-asian Eigenschaft](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "CSS font-variant-east-asian Eigenschaft" =420x)
Kombination von Breiten- und Variantenwerten
Sie können gleichzeitig einen Variantenwert und einen Breitenwert festlegen. Die Schlüsselwörter können in beliebiger Reihenfolge angegeben werden:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cjk {
font-variant-east-asian: simplified full-width;
}
</style>
</head>
<body>
<p class="cjk">図書館 1234</p>
</body>
</html>Hier wählt simplified die vereinfachte Glyphenvariante, während full-width Full-Width-Formen für die Ziffern erzwingt, sodass diese dieselbe Zellenbreite wie die umgebenden CJK-Zeichen einnehmen.
Werte
| Wert | Beschreibung |
|---|---|
| normal | Die Verwendung alternativer Glyphen ist nicht aktiviert. |
<east-asian-variant-values> | Wählt eine logografische Glyphenvariante aus. Eines von jis78, jis83, jis90, jis04, simplified oder traditional. |
<east-asian-width-values> | Steuert die Größe der Ziffern für ostasiatische Zeichen: proportional-width (proportional gesetzt) oder full-width (Full-Width-Formen). |
| ruby | Erzwingt die Verwendung spezieller, kleinerer Glyphen, die für Ruby-(Annotations-)Zeichen vorgesehen sind. |
| initial | Setzt die Eigenschaft auf ihren Standardwert (normal). |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Ein gültiger Wert kombiniert höchstens ein Variantenschlüsselwort und ein Breitenschlüsselwort (zum Beispiel jis90 full-width) oder die einzelnen Schlüsselwörter normal bzw. ruby.
Verwandte Eigenschaften
font-variant— die Kurzschreibweise, die diese Langform enthält.font-feature-settings— Low-Level-Steuerung derselben OpenType-Funktionen.font-family— Wählen Sie eine Schriftart, die tatsächlich ostasiatische Variantenglyphen enthält.