Explication détaillée de la variation de police CSS3 font-variation-tutoriel CSS-php.cn

Si vous souhaitez utiliser un mot pour le décrire, vous pouvez l'appeler Variantes de police. L'attribut CSS correspondant est l'attribut font-variation-*, qui comprend les ligatures, les majuscules, les nombres (chiffres) et les glyphes alternatifs (alternatifs). glyphes). Ces propriétés nous permettent de créer des effets typographiques (texte) plus précis et plus beaux sur le Web.

En fait, la typographie sur le Web sera toujours en retard par rapport à son efficacité sur papier. Mais c'est compréhensible, car les polices imprimées sur la page ont évolué au fil des siècles, pour ainsi dire, jusqu'à un niveau de sophistication. Il est encore difficile d’atteindre un tel niveau dans un navigateur.

Cependant, en raison de l'augmentation de la fonctionnalité OpenType dans les polices Web et de l'amélioration des fonctionnalités et capacités CSS, l'écart entre la composition sur le Web et la composition sur papier se rétrécit progressivement.

Donc, dans l'article d'aujourd'hui, avec l'aide de l'exemple précédent, nous verrons comment utiliser CSS pour contrôler les fonctionnalités OpenType, mais n'oubliez pas que toutes les polices Web que vous utilisez doivent prendre en charge ces fonctionnalités.

`font-variant-*`Attribut

La plupart des fonctionnalités OpenType peuvent être contrôlées via l'attribut font-variant-* en CSS. Vous pouvez également utiliser font-feature-settings pour prendre en charge les versions inférieures des navigateurs. Cependant, dans la mesure du possible, vous devez utiliser l'attribut font-variant-* plus moderne. En utilisation réelle, vous pouvez utiliser la règle @supports pour rétrograder font-variant-*. Utilisez cet attribut pour les navigateurs pris en charge et utilisez font-feature-settings pour les navigateurs non pris en charge.

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

Copier après la connexion

Peut-être que jusqu'à présent, comme moi, vous ne comprenez toujours pas très bien ce que fait le code ci-dessus. Ne vous inquiétez pas, continuez à lire et vous comprendrez.

font-variant-*Comprend principalement :

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

Retour Examinons brièvement ces propriétés.

`font-variant-ligatures`

Un lien est un seul glyphe composé de deux ou plusieurs glyphes. Ils évitent souvent les collisions de lettres disgracieuses ou gênantes. La fonction principale est que aide à identifier .

font-variant-ligatures peut utiliser les mots-clés suivants comme valeurs d'attribut :

/* 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;

Copier après la connexion

`common-ligatures`

Ces connexions sont ce que le concepteur décide d'utiliser dans des circonstances normales connect . Dans la plupart des cas, ceux-ci doivent être utilisés car la plupart des navigateurs les activent par défaut.

Les valeurs de jointure les plus courantes sont fi, ffi, th ou similaire. Leurs valeurs OpenType correspondantes sont liga et clig. Les deux valeurs sont possibles :

common-ligatures : activer la connexion
no-common-ligatures : désactiver la connexion

Par exemple :

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; /* 低版本浏览器 禁用 */

Copier après la connexion

L'effet est le suivant :

L'effet de l'activation de la connexion dans la ligne précédente et de la désactivation de la connexion dans la ligne suivante

`discretionary-ligatures`

Ceux-ci peuvent être utilisés pour imprimer des connexions afin d'obtenir des effets spéciaux. Ceux-ci sont désactivés par défaut. On peut également comprendre que ces valeurs peuvent être utilisées pour contrôler des connexions spécifiques, des polices spécifiques et définies par le concepteur OpenType. Ils correspondent à la valeur OpenType dig. Il a également deux valeurs possibles :

discretionary-ligatures : activer la connexion
no-discretionary-ligatures : désactiver la connexion

S'il est défini dans votre code :

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; /* 低版本浏览器 禁用 */

Copier après la connexion

L'effet est le suivant :

La première ligne active la connexion, la deuxième ligne désactive la connexion

`contextual`

Ces valeurs contrôlent si les lettres s'adaptent à leur contexte. Autrement dit, s'ils s'intègrent aux lettres qui les entourent. Ces valeurs correspondent à calt dans OpenType. De même, contextual signifie activé ; no-contextual signifie désactivé.

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

Copier après la connexion

Avec ces valeurs, cela ressemblera à tz en allemand apparaît comme ß. Sa valeur OpenType correspondante est hlig. La sonnerie historical-ligatures est activée, tandis que la sonnerie no-historical-ligatures est désactivée.

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 */

Copier après la connexion

`font-variant-position`

Nous utilisons souvent les éléments sub et sup pour modifier la position verticale des caractères. Par défaut, les navigateurs utiliseront un caractère numérique normal pour réduire font-size et utiliseront vertical-align pour l'augmenter ou le diminuer. Ce ne sont pas vraiment des sub et des sup, et ont souvent l'air moches, sans compter qu'ils gâchent le line-height.

Heureusement, il existe désormais un moyen d'obtenir des effets tels que font-variant-position et sub en utilisant sup. Cependant, cette propriété n'est actuellement prise en charge que dans Firefox.

/* 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;

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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;

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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;

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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 */

Copier après la connexion

`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;

Copier après la connexion

`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 */

Copier après la connexion

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

`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;

Copier après la connexion

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