Ausführliche Erklärung der CSS3-Schriftartvariante „font-variation'.-CSS-Tutorial-php.cn

Wenn Sie ein Wort zur Beschreibung verwenden möchten, können Sie es als Schriftartvarianten bezeichnen. Das entsprechende CSS-Attribut ist das font-variation-*-Attribut, das Ligaturen, Großbuchstaben, Zahlen (Ziffern) und alternative Glyphen (alternativ) umfasst Glyphen). Diese Eigenschaften ermöglichen es uns, präzisere und schönere Typografie-(Text-)Effekte im Web zu erstellen.

Tatsächlich wird die Typografie im Web immer hinter ihrer Effektivität im Druck zurückbleiben. Aber das ist verständlich, denn die auf der Seite abgedruckten Schriftarten haben sich im Laufe der Jahrhunderte sozusagen zu einem Grad an Verfeinerung entwickelt. Es ist immer noch schwierig, ein solches Niveau in einem Browser zu erreichen.

Aufgrund der zunehmenden OpenType-Funktionalität in Web-Schriftarten und der Verbesserung der CSS-Funktionen und -Fähigkeiten wird die Kluft zwischen dem Schriftsatz im Web und dem Schriftsatz im Druck jedoch allmählich kleiner.

Im heutigen Artikel werfen wir daher mithilfe des vorherigen Beispiels einen Blick darauf, wie man CSS zur Steuerung von OpenType-Funktionen verwendet. Bedenken Sie jedoch bitte, dass alle von Ihnen verwendeten Webfonts diese Funktionen unterstützen müssen.

`font-variant-*`Attribut

Die meisten OpenType-Funktionen können über das font-variant-*-Attribut in CSS gesteuert werden. Sie können auch font-feature-settings verwenden, um Browser niedrigerer Versionen zu unterstützen. Sie sollten jedoch, wann immer möglich, das modernere font-variant-*-Attribut verwenden. Bei der tatsächlichen Verwendung können Sie die @supports-Regel zum Downgrade von font-variant-* verwenden. Verwenden Sie dieses Attribut für unterstützte Browser und font-feature-settings für nicht unterstützte Browser.

body {    font-feature-settings: "liga" 1;}@supports (font-variant-ligatures: common-ligatures) {    body {        font-feature-settings: normal;        font-variant-ligatures: common-ligatures;    }}

Nach dem Login kopieren

Vielleicht haben Sie, genau wie ich, bis jetzt immer noch nicht ganz verstanden, was der obige Code bewirkt. Machen Sie sich keine Sorgen, lesen Sie weiter und Sie werden es herausfinden.

font-variant-*Hauptsächlich umfassen:

font-variant-ligatures
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian

Zurück Werfen wir einen kurzen Blick auf diese Eigenschaften.

`font-variant-ligatures`

Ein Link ist eine einzelne Glyphe, die aus zwei oder mehr Glyphen besteht. Sie verhindern oft unschöne oder unangenehme Briefkollisionen. Die Hauptfunktion besteht darin, dass dabei hilft, zu identifizieren.

font-variant-ligatures kann die folgenden Schlüsselwörter als Attributwerte verwenden:

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

Nach dem Login kopieren

`common-ligatures`

Diese Verbindungen werden vom Designer unter normalen Umständen verwendet. verbinden. In den meisten Fällen sollten diese verwendet werden, da die meisten Browser sie standardmäßig aktivieren.

Die häufigsten Join-Werte sind fi, ffi, th oder ähnlich. Ihre entsprechenden OpenType-Werte sind liga und clig. Beide Werte sind möglich:

common-ligatures: Verbindung aktivieren
no-common-ligatures: Verbindung deaktivieren

Zum Beispiel:

font-variant-ligatures: common-ligatures; /* 开启 */font-variant-ligatures: no-common-ligatures; /* 禁用 */font-feature-settings: &#39;liga&#39; 1; /* 低版本浏览器 开启 */font-feature-settings: &#39;liga&#39; 0; /* 低版本浏览器 禁用 */

Nach dem Login kopieren

Der Effekt ist wie folgt:

Der Effekt des Aktivierens der Verbindung in der vorherigen Zeile und des Deaktivierens der Verbindung in der nächsten Zeile

`discretionary-ligatures`

Diese können zum Drucken von Verbindungen verwendet werden, um besondere Effekte zu erzielen. Diese sind standardmäßig deaktiviert. Es versteht sich auch, dass diese Werte zur Steuerung bestimmter Verbindungen, bestimmter Schriftarten und der Definition durch den OpenType-Designer verwendet werden können. Sie entsprechen dem OpenType-Wert dig. Es gibt auch zwei mögliche Werte:

discretionary-ligatures: Verbindung aktivieren
no-discretionary-ligatures: Verbindung deaktivieren

Wenn es in Ihrem Code festgelegt ist:

font-variant-ligatures: discretionary-ligatures; /* 激活 */font-variant-ligatures: no-discretionary-ligatures; /* 禁用 */font-feature-settings: &#39;dlig&#39; 1; /* 低版本浏览器 激活 */font-feature-settings: &#39;dlig&#39; 0; /* 低版本浏览器 禁用 */

Nach dem Login kopieren

Der Effekt ist wie folgt:

Die erste Zeile aktiviert die Verbindung, die zweite Zeile deaktiviert die Verbindung

`contextual`

Diese Werte steuern, ob sich Buchstaben an ihren Kontext anpassen. Das heißt, ob sie zu den Buchstaben um sie herum passen. Diese Werte entsprechen calt in OpenType. Ebenso bedeutet contextual aktiviert; no-contextual bedeutet deaktiviert.

font-variant-ligatures: contextual; /* enable */font-variant-ligatures: no-contextual; /* disable */font-feature-settings: &#39;calt&#39; 1; /* low-level enable */font-feature-settings: &#39;calt&#39; 0; /* low-level disable */historical-ligatures

Nach dem Login kopieren

Mit diesen Werten sieht es so aus, als ob tz im Deutschen als ß erscheint. Der entsprechende OpenType-Wert ist hlig. Der historical-ligatures-Ring ist aktiviert, während der no-historical-ligatures-Ring deaktiviert ist.

font-variant-ligatures: historical-ligatures; /* enable */font-variant-ligatures: no-historical-ligatures; /* disable */font-feature-settings: &#39;hlig&#39; 1; /* low-level enable */font-feature-settings: &#39;hlig&#39; 0; /* low-level disable */

Nach dem Login kopieren

`font-variant-position`

Wir verwenden häufig die Elemente sub und sup, um die vertikale Position von Zeichen zu ändern. Standardmäßig verwenden Browser ein normales numerisches Zeichen, um font-size kleiner zu machen, und verwenden vertical-align, um es zu erhöhen oder zu verringern. Diese sind nicht wirklich sub und sup und sehen oft hässlich aus, ganz zu schweigen davon, dass sie das line-height durcheinander bringen.

Glücklicherweise gibt es jetzt eine Möglichkeit, mit font-variant-position tatsächlich Effekte wie sub und sup zu erzielen. Allerdings wird diese Eigenschaft derzeit nur in Firefox unterstützt.

/* Keyword values */font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;/* Global values */font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;

Nach dem Login kopieren

`sub`

实现类似于<sub>标签的下标字符效果：

font-variant-position: sub; /* enable */font-variant-position: normal; /* disable both variants */font-feature-settings: &#39;subs&#39; 1; /* low-level enable */font-feature-settings: &#39;subs&#39; 0; /* low-level disable */

Nach dem Login kopieren

`super`

实现类似于<sup>标签的上标字符效果：

font-variant-position: super; /* enable */font-variant-position: normal; /* disable both variants */font-feature-settings: &#39;sups&#39; 1; /* low-level enable */font-feature-settings: &#39;sups&#39; 0; /* low-level disable */

Nach dem Login kopieren

`font-variant-caps`

font-variant-caps属性用来控制字母大写。只不过这里启用的是小型大写。

/* Keyword values */font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;/* Global values */font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

Nach dem Login kopieren

`small-caps`

小型大写字母的设计与小写字母相同，用于在运行文本中大写字母。它们使段落更具内聚力和可读性。

font-variant-caps: small-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;smcp&#39; 1; /* low-level enable */font-feature-settings: &#39;smcp&#39; 0; /* low-level disable */

Nach dem Login kopieren

`all-small-caps`

small-caps只是替换了小写字母为大写字母。要是想将所有字母都变成小的大写字母，需要使用all-small-caps。

font-variant-caps: all-small-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;smcp&#39; 1, &#39;c2sc&#39; 1; /* low-level enable */font-feature-settings: &#39;smcp&#39; 1, &#39;c2sc&#39; 0; /* low-level disable */

Nach dem Login kopieren

`petite-caps`

标准的小型大写字母通常会比字体的x高度略大一些。一些字体有额外的小型大写，与x高度匹配。这些被称为petite-caps。

font-variant-caps: petite-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;pcap&#39; 1; /* low-level enable */font-feature-settings: &#39;pcap&#39; 0; /* low-level disable */

Nach dem Login kopieren

`all-petite-caps`

与all-small-caps类似，它将所有字母包括小写字母和大写字母，都转换成小型大写字母，而且和字体的x字母高度相匹配。

font-variant-caps: all-petite-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;pcap&#39; 1, &#39;c2pc&#39; 1; /* low-level enable */font-feature-settings: &#39;pcap&#39; 1, &#39;c2pc&#39; 0; /* low-level disable */

Nach dem Login kopieren

`unicase`

该功能将大写和小写字母映射到混合的小写字母和小写的大型字母，创建一个单一case的字母表。有时这些小写字母是实际的小型大写字母，有时它们是特别设计的unicase形式。这个特性的实现从字体到字体各不相同。

font-variant-caps: unicase; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;unic&#39; 1; /* low-level enable */font-feature-settings: &#39;unic&#39; 0; /* low-level disable */

Nach dem Login kopieren

`titling-caps`

标准的大写字母设计是用来与小写字母一起使用的，当它们被用在所有大写字母的字符串时，它们会显得过于大一点。有些字体还特别适合这种情况。

font-variant-caps: titling-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: &#39;titl&#39; 1; /* low-level enable */font-feature-settings: &#39;titl&#39; 0; /* low-level disable */

Nach dem Login kopieren

`font-variant-numeric`

font-variant-numeric属性用来控制对数字、分数和序号标记的处理。数字的正确显示取决于上下文的不同，以下是一些一般性的规则：

运行于文本正文中的数字，使用比例的是旧式数字
运行在标题中的数字，使用的比例是内联数字
在数字表格中的数字，使用的比例是表格内联数字

常用的属性：

font-variant-numeric: normal;font-variant-numeric: ordinal;font-variant-numeric: slashed-zero;font-variant-numeric: lining-nums;         /* <numeric-figure-values> */font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */font-variant-numeric: oldstyle-nums stacked-fractions;/* Global values */font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

Nach dem Login kopieren

`lining-nums`

lining-nums里的数字近似大写字母，高度一致。它们应该用于标题或表格中的数字。通常情况下，数字是默认的。

font-variant-numeric: lining-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;lnum&#39; 1; /* low-level enable */font-feature-settings: &#39;lnum&#39; 0; /* low-level disable */

Nach dem Login kopieren

`oldstyle-nums`

旧式数字（Old-style）有不同的高度和对齐方式，因此更类似于小写字母。它们应该用于正文文本中。

font-variant-numeric: oldstyle-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;onum&#39; 1; /* low-level enable */font-feature-settings: &#39;onum&#39; 0; /* low-level disable */

Nach dem Login kopieren

`proportional-nums`

比例（Proportional）数字具有可变的间距，并与水平文本相融合。它们应该在大多数情况下使用，除了数据表格中。其中垂直对齐很重要。通常数字在默认情况下是比例数字。

font-variant-numeric: proportional-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;pnum&#39; 1; /* low-level enable */font-feature-settings: &#39;pnum&#39; 0; /* low-level disable */

Nach dem Login kopieren

`tabular-nums`

表格数字具有相同的宽度，应该在数据表格中使用，以允许数字垂直对齐。

font-variant-numeric: tabular-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;tnum&#39; 1; /* low-level enable */font-feature-settings: &#39;tnum&#39; 0; /* low-level disable */

Nach dem Login kopieren

`diagonal-fractions`

默认情况下，分数将以小写字母的形式显示。适当的分数将被格式化，以匹配一个衬里图形的高度，可以是对象线或堆叠。

font-variant-numeric: diagonal-fractions; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;frac&#39; 1; /* low-level enable */font-feature-settings: &#39;frac&#39; 0; /* low-level disable */

Nach dem Login kopieren

`stacked-fractions`

在大多数Web字体中，堆叠分数并不像对角线分数那样普遍，但它应该被证明是有用的。这在大量的科学或数学中用得多。

font-variant-numeric: stacked-fractions; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;afrc&#39; 1; /* low-level enable */font-feature-settings: &#39;afrc&#39; 0; /* low-level disable */

Nach dem Login kopieren

`ordinal`

Ordinal像st、nd、rd和th这样的序号默认显示为标准小写字母。然而，理想情况下，这些数字会随着数字的增加而增加。序数值支持这一点。

font-variant-numeric: ordinal; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;ordn&#39; 1; /* low-level enable */font-feature-settings: &#39;ordn&#39; 0; /* low-level disable */

Nach dem Login kopieren

`slashed-zero`

可以使用斜线来替换零字符。

font-variant-numeric: slashed-zero; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;zero&#39; 1; /* low-level enable */font-feature-settings: &#39;zero&#39; 0; /* low-level disable */

Nach dem Login kopieren

`font-variant-alternates`

字体可以为任何字符提供多种替换。font-variant-alternates属性提供了许多控制字符替换的方法。

/* Keyword values */font-variant-alternates: normal;
font-variant-alternates: historical-forms;/* Functional notation values */font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);/* Global values */font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

Nach dem Login kopieren

`historical-forms`

被运用于周期表。请注意这与连接中的效果还是有不同之处。

font-variant-numeric: historical-forms; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: &#39;hist&#39; 1; /* low-level enable */font-feature-settings: &#39;hist&#39; 0; /* low-level disable */

Nach dem Login kopieren

除此之外，根据不同的场景选择不同的属性值。

`font-variation-settings`

font-variation-settings属性主要用于指定需要更改的特性，其主要有由个字母和它们的变化值组成。该属性提供了对OpenType或TrueType字体变体的在低浏览器的控制。

/* Use the default settings */font-variation-settings: normal;/* Set values for OpenType axis names */font-variation-settings: "XHGT" 0.7;/* Global values */font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

Nach dem Login kopieren

这就是在我们文章的开头的示例中看到的font-variation-settings: 'INLN' 0;和font-variation-settings: 'INLN' 1000, 'SWRM' 1000;等。每个值都有4个ASCII字符和一个表示axis值的数字组成。如果<string>有更多或更少的字符或包含U+20至U+7E的codepoint范围之外的字符，那么整个属性都是无效的。而<number>可以是分数，也可以是负数。