Explication détaillée de la variation de police CSS3 font-variation

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

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;

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: 'liga' 1; /* 低版本浏览器 开启 */font-feature-settings: 'liga' 0; /* 低版本浏览器 禁用 */

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: 'dlig' 1; /* 低版本浏览器 激活 */font-feature-settings: 'dlig' 0; /* 低版本浏览器 禁用 */

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: 'calt' 1; /* low-level enable */font-feature-settings: 'calt' 0; /* low-level disable */historical-ligatures

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: 'hlig' 1; /* low-level enable */font-feature-settings: 'hlig' 0; /* low-level disable */

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;

sub

实现类似于b96cac025db4031319c29e1eb68f19d6标签的下标字符效果：

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

super

实现类似于2cdea26b4c3988e37d674b56660962a7标签的上标字符效果：

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

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;

small-caps

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

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

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: 'smcp' 1, 'c2sc' 1; /* low-level enable */font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

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

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

all-petite-caps

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

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

unicase

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

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

titling-caps

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

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

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;

lining-nums

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

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

oldstyle-nums

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

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

proportional-nums

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

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

tabular-nums

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

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

diagonal-fractions

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

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

stacked-fractions

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

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

ordinal

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

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

slashed-zero

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

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

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;

historical-forms

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

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

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

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;

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

总结

撸了一圈font-variation-*相关的属性，总算是了解了这个Demo的实现原理了。但要完全掌握这些知识，还是需要一定的时间的。必竟有很多知识点都和字体以及排版相关的。这需要具备一些印刷相关的知识，或许能帮助我们更好的掌握这些属性的特性，以及使用的场景。

另外，目前这些属性，浏览器能支持的为数不多，不过不要紧，感兴趣的可以玩玩，体验一下。或者自己把文章开头的示例修改一下下，说不定能达到另外的效果。

相关推荐：

CSS3 font-feature-settings特性减除字体动画震颤效果实例分享

javascript字体颜色控件的开发

CSS的文本字体颜色如何设置

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!