Cette page présente, de manière détaillée, les différentes fonctionnalités OpenType, avec des exemples spécifiques pour chacune d’elles. Pour obtenir un aperçu général de l’activation des fonctionnalités OpenType dans vos projets web et leur utilisation en CSS, consultez le document traitant de l’utilisation des fonctionnalités OpenType en CSS.

Ligatures courantes/standard (liga)

Exemple de ligatures en Warnock Pro.

Exemple d’application du code CSS liga

Cette fonctionnalité remplace une suite de glyphes par un seul glyphe, appelé ligature, ce qui est préférable pour des applications typographiques. Une fois activée, cette fonctionnalité insère les ligatures qui, du point de vue du concepteur/fabricant, doivent être utilisées dans des conditions normales.

La fonctionnalité Ligatures est activée par défaut, ce qui signifie qu’elle fonctionne normalement sans qu’il faille écrire le moindre code CSS. Cependant, elle n’est pas activée par défaut dans Chrome. Ajoutons encore qu’elle ne peut pas être désactivée dans Safari (Mac ou iOS). Dans certaines versions de Chrome et Firefox, les ligatures qui contiennent des espaces posent également problème.

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-ligatures, utilisez la valeur common-ligatures, laquelle active à la fois les ligatures courantes et contextuelles. À l’instar des variantes contextuelles, les ligatures contextuelles intègrent une logique conditionnelle qui n’applique des glyphes de remplacement que dans des situations bien précises. Pour obtenir le même effet avec font-feature-settings, utilisez les balises « liga » et « clig ». Voir aussi : Syntaxe d’utilisation de plusieurs fonctionnalités OpenType.

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

Pour désactiver cette fonctionnalité, utilisez la valeur no-common-ligatures et un indice numérique de zéro pour font-feature-settings.

Variantes contextuelles (calt)

Exemple de variantes contextuelles en Caflisch Script Pro.

Exemple d’application du code CSS calt

Dans des situations spécifiées, cette fonctionnalité remplace les glyphes par défaut par d’autres formes qui offrent une meilleure liaison. À l’instar des ligatures (bien qu’il ne s’agisse pas, au sens strict, d’une fonctionnalité de ligature), les variantes contextuelles sont généralement utilisées pour harmoniser les formes des glyphes avec le contexte.

La fonctionnalité Variantes contextuelles est activée par défaut, ce qui signifie que son fonctionnement n’implique normalement pas l’écriture de code CSS. Cependant, elle n’est pas activée par défaut dans Chrome. Ajoutons encore qu’elle ne peut pas être désactivée dans Safari (Mac ou iOS).

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-ligatures, utilisez la valeur contextual. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « calt ».

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

Pour désactiver cette fonctionnalité, utilisez la valeur no-contextual et un indice numérique de zéro pour font-feature-settings.

Ligatures conditionnelles (dlig)

Exemple de ligatures conditionnelles en Warnock Pro.

Exemple d’application du code CSS dlig

Cette fonctionnalité remplace une suite de glyphes par un seul glyphe (une ligature), ce qui est préférable pour des applications typographiques. Une fois activée, cette fonctionnalité insère ces ligatures qui peuvent être utilisées pour générer des effets spéciaux.

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

La fonctionnalité Ligatures conditionnelles est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-ligatures , utilisez la valeur discretionary-ligatures. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « dlig ».

Petites majuscules (smcp)

Exemple de petites majuscules en Warnock Pro.

Exemple d’application du code CSS smcp

Cette fonctionnalité transforme les caractères minuscules en petites majuscules.

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

La fonctionnalité Petites majuscules est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-caps, utilisez la valeur small-caps. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « smcp ».

Avec certaines polices, la fonctionnalité Petites majuscules peut également inclure d’autres formes. Conformément à la spécification OpenType, la fonctionnalité OpenType smcp peut inclure des formes liées aux petites majuscules, telles que des chiffres arabes non alignés.

Majuscules en petites majuscules (c2sc)

Exemple de majuscules en petites majuscules en Warnock Pro.

Exemple d’application du code CSS c2sc

Cette fonctionnalité transforme les caractères majuscules en petites majuscules.

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

La fonctionnalité Majuscules en petites majuscules est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-caps, utilisez la valeur all-small-caps, laquelle transforme les caractères majuscules et minuscules en petites majuscules. Cela se justifie, dans la mesure où vous appliquez rarement des petites majuscules à des caractères exclusivement majuscules. Pour obtenir le même effet avec font-feature-settings, utilisez les balises « c2sc » et « smcp ». Voir aussi : Syntaxe d’utilisation de plusieurs fonctionnalités OpenType.

Paraphes (swsh)

Exemple de paraphes en Bickham Script Pro 3.

Exemple d’application du code CSS swsh

Cette fonctionnalité remplace les glyphes de caractère par défaut par les glyphes de paraphe correspondants.

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

La fonctionnalité Paraphes est désactivée par défaut.

Pour l’activer avec la propriété font-feature-settings, utilisez la balise « swsh ». Notez qu’il peut exister plusieurs variantes de paraphe pour un caractère donné. Pour accéder aux variantes de paraphe, ajoutez un indice numérique à la valeur :

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

Cela active le deuxième paraphe disponible, s’il existe dans la police. Comme vous l’aurez compris, l’utilisation d’une valeur « swsh », comme dans notre premier exemple de code, équivaut à utiliser une valeur « swsh » 1.

Pour l’instant, nous allons ignorer la propriété font-variant, car ses valeurs « nommées » [comme swash(flowing)] sont mappées sur des index de paraphes numériques par des définitions CSS font-feature-value qui ne sont pas encore prises en charge par les principaux navigateurs.

Variantes stylistiques (salt)

Exemple de paraphes en Bree.

Exemple d’application du code CSS salt

Cette fonctionnalité remplace les glyphes de caractère par défaut par des variantes stylistiques. Voir aussi : Ensembles stylistiques (ss##).

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

La fonctionnalité Variantes stylistiques est désactivée par défaut.

Pour l’activer avec la propriété font-feature-settings, utilisez la balise « salt ». Notez qu’il peut exister plusieurs variantes stylistiques pour un caractère donné. Pour accéder à d’autres variantes stylistiques, ajoutez un indice numérique à la valeur :

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

Cela active la deuxième variante stylistique disponible, si elle existe dans la police. Comme vous l’aurez compris, l’utilisation d’une valeur « salt », comme dans notre premier exemple de code, équivaut à utiliser une valeur « salt » 1.

Pour l’instant, nous allons ignorer la propriété font-variant, car ses valeurs « nommées » (dont il n’existe pas de bons exemples) sont mappées sur des index de variantes stylistiques numériques par des définitions CSS font-feature-value qui ne sont pas encore prises en charge par les principaux navigateurs.

Chiffres alignés (lnum)

Exemple de chiffres alignés en Warnock Pro.

Exemple d’application du code CSS lnum

Cette fonctionnalité transforme les glyphes numériques par défaut ou les chiffres arabes non alignés en chiffres alignés. Certaines polices peuvent contenir des chiffres alignés comme style de chiffre par défaut. Dans ce cas, il se peut que l’activation de cette fonctionnalité ne semble pas affecter le style des glyphes.

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

La fonctionnalité Chiffres alignés est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur lining-nums. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « lnum ».

Chiffres arabes non alignés (onum)

Exemple de chiffres arabes non alignés en Warnock Pro.

Exemple d’application du code CSS onum

Cette fonctionnalité transforme les glyphes numériques par défaut ou les chiffres alignés en chiffres arabes non alignés. Certaines polices peuvent contenir des chiffres arabes non alignés comme style de chiffre par défaut. Dans ce cas, il se peut que l’activation de cette fonctionnalité ne semble pas affecter le style des glyphes.

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

La fonctionnalité Chiffres arabes non alignés est désactivée par défaut

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur oldstyle-nums. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « onum ».

Chiffres proportionnels (pnum)

Exemple de chiffres proportionnels en Hypatia Sans Pro.

Exemple d’application du code CSS pnum

Cette fonctionnalité remplace des glyphes numériques définis sur des largeurs uniformes (tabulaires) par les glyphes correspondants définis sur des largeurs spécifiques au glyphe (proportionnelles). Certaines polices peuvent contenir des chiffres proportionnels par défaut. Dans ce cas, il se peut que l’activation de cette fonctionnalité ne semble pas affecter la largeur des glyphes.

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

La fonctionnalité Chiffres proportionnels est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur proportional-nums. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « pnum ».

Chiffres tabulaires (tnum)

Exemple de chiffres tabulaires en Hypatia Sans Pro.

Exemple d’application du code CSS tnum

Cette fonctionnalité remplace des glyphes numériques définis sur des largeurs spécifiques au glyphe (proportionnelles) par les glyphes correspondants définis sur des largeurs uniformes (tabulaires). Certaines polices peuvent contenir des chiffres tabulaires par défaut. Dans ce cas, il se peut que l’activation de cette fonctionnalité ne semble pas affecter la largeur des glyphes.

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

La fonctionnalité Chiffres tabulaires est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur tabular-nums. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « tnum ».

Fractions (frac)

Exemple de fractions en Warnock Pro.

Exemple d’application du code CSS frac

Cette fonctionnalité remplace les chiffres séparés par une barre oblique par des fractions standard (diagonales).

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

La fonctionnalité Fractions est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur diagonal-fractions. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « frac ».

Ordinaux (ordn)

Exemple d’ordinaux en Warnock Pro.

Exemple d’application du code CSS ordn

Cette fonctionnalité remplace les glyphes alphabétiques par défaut par les formes ordinales correspondantes, à utiliser après les chiffres.

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

La fonctionnalité Ordinaux est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-numeric, utilisez la valeur ordinal. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « ordn ».

Notez que tous les remplacements de glyphes se produisent après les chiffres. Conformément à la spécification OpenType : « Une exception à la règle de suivi du chiffre concerne le symbole du numéro (U+2116) qui est, en réalité, une substitution de ligature, mais dont l’accès est facilité via cette fonctionnalité. »

Ensembles stylistiques (ss##)

Exemple d’ensembles stylistiques en Hypatia Sans Pro.

Exemple d’application du code CSS d’ensembles stylistiques

Cette fonctionnalité remplace les ensembles de glyphes de caractère par défaut par des variantes stylistiques. Les glyphes qui composent les ensembles stylistiques peuvent être conçus afin de s’harmoniser sur le plan visuel, d’interagir de différentes manières ou encore de fonctionner conjointement. Voir aussi : variantes stylistiques (salt), lesquelles sont conçues pour offrir des variantes stylistiques pour les glyphes individuels.

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

La fonctionnalité Ensembles stylistiques est désactivée par défaut.

Pour l’activer avec la propriété font-feature-settings, utilisez la balise « ss## », où « ## » représente toute combinaison de deux chiffres entre 01 et 20. Notez que les polices utilisent des ensembles stylistiques de manière totalement arbitraire et personnalisée. Par exemple, il se peut que deux polices utilisent la même fonctionnalité (comme ss01) pour remplacer des ensembles de glyphes totalement différents ou encore qu’une police utilise ss01 et ss03 pour remplacer des ensembles de glyphes, mais ignore ss02. Certains fondeurs proposent de la documentation sur l’organisation de ces fonctionnalités.

Pour l’instant, nous allons ignorer la propriété font-variant , car ses valeurs « nommées » [comme styleset(sharp-serifs)] sont mappées sur des index d’ensembles stylistiques numériques par des définitions CSS font-feature-value qui ne sont pas encore prises en charge par les principaux navigateurs.

Chasses proportionnelles (pwid)

Exemple de chasse proportionnelle en Kozuka Mincho Pr6n :

Exemple d’application du code CSS pwid

Cette fonctionnalité remplace les glyphes à chasse uniforme (généralement cadratin ou demi-cadratin) par des glyphes espacés de manière proportionnelle. Les variantes proportionnelles sont souvent utilisées pour les caractères latins des polices CJCV, mais peuvent aussi servir pour les caractères kana des polices japonaises. (Source.)

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

La fonctionnalité de chasse proportionnelle est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur proportional-width. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « pwid ».

Chasses auxiliaires proportionnelles (palt)

Exemple de chasses auxiliaires proportionnelles en Source Han Sans :

Exemple d’application du code CSS palt

Cette fonctionnalité réespace les glyphes conçus pour être définis sur des chasses d’un cadratin, en les ajustant par rapport à des chasses horizontales individuelles (plus ou moins proportionnelles). Contrairement à la balise pwid, cette fonctionnalité ne remplace pas ces glyphes par de nouveaux glyphes (fonctionnalité GPOS et non GSUB). Il est possible que l’utilisateur préfère utiliser des formes à chasse fixe ou simplement s’assurer que le glyphe est bien adapté et non pivoté avec le paramétrage vertical (les formes latines conçues pour un espacement proportionnel peuvent faire l’objet d’une rotation). (Source.)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

La fonctionnalité de chasses auxiliaires proportionnelles est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « palt ».

Caractères kana proportionnels (pkna)

Exemple de caractères kana proportionnels en Kozuka Mincho Pr6n :

Exemple d’application du code CSS pkna

Cette fonctionnalité remplace les glyphes kana et apparentés définis sur des chasses uniformes (demi-chasses ou pleines chasses) par des glyphes proportionnels. Elle est semblable à la fonctionnalité de chasses proportionnelles, si ce n’est que seuls les caractères kana sont concernés. (Source.)

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

La fonctionnalité de caractères kana proportionnels est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « pkna ».

Pleines chasses (fwid)

Exemple de pleines chasses en Kozuka Mincho Pr6n :

Exemple d’application du code CSS fwid

Cette fonctionnalité remplace les glyphes définis sur d’autres chasses par des glyphes définis sur des pleines chasses (généralement cadratin). Dans une police CJCV, elle peut inclure des caractères latins ASCII inférieurs et divers symboles. Dans une police européenne, cette fonctionnalité remplace les glyphes à chasse proportionnelle par des glyphes à chasse fixe, généralement définis sur des chasses de 0,6 cadratin. (Source.)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

La fonctionnalité de pleines chasses est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur full-width. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « fwid ».

Demi-chasses (hwid)

Exemple de demi-chasses en Kozuka Mincho Pr6n :

Exemple d’application du code CSS hwid

Cette fonctionnalité remplace les glyphes sur des chasses proportionnelles, ou des chasses fixes autres qu’un demi-cadratin, par des glyphes définis sur des chasses de demi-cadratin (en). De nombreuses polices CJCV contenant des glyphes définis sur plusieurs chasses, cette fonctionnalité sélectionne la version demi-cadratin. Il s’agit du comportement privilégié dans divers contextes, y compris pour des questions de compatibilité avec d’anciens documents. (Source.)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

La fonctionnalité de demi-chasses est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « hwid ».

Demi-chasses auxiliaires (halt)

Exemple de demi-chasses auxiliaires en Kozuka Mincho Pr6n :

Exemple d’application du code CSS halt

Cette fonctionnalité réespace les glyphes conçus pour être définis sur des chasses d’un cadratin, en les ajustant par rapport à des chasses d’un demi-cadratin. Contrairement à la balise hwid, elle n’effectue pas de remplacement de glyphes. (Source.)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

La fonctionnalité de demi-chasses auxiliaires est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « halt ».

Tiers de chasse (twid)

Exemple de tiers de chasse en Kozuka Mincho Pr6n :

Exemple d’application du code CSS twid

Cette fonctionnalité remplace les glyphes définis sur d’autres chasses par des glyphes définis sur des chasses d’un tiers de cadratin. Les caractères concernés sont généralement des chiffres et certaines formes de ponctuation. (Source.)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

La fonctionnalité de tiers de chasse est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « twid ».

Quarts de chasse (qwid)

Exemple de quarts de chasse en Kozuka Mincho Pr6n :

Exemple d’application du code CSS qwid

Cette fonctionnalité remplace les glyphes définis sur d’autres chasses par des glyphes définis sur des chasses d’un quart de cadratin (un demi demi-cadratin). Les caractères concernés sont généralement des chiffres et certaines formes de ponctuation. (Source.)

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

La fonctionnalité de quarts de chasse est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « qwid ».

Formes JIS78 (jp78)

Exemple de formes JIS78 en Kozuka Mincho Pr6n :

Exemple d’application du code CSS jp78

Cette fonctionnalité remplace les glyphes japonais par défaut (JIS90) par les formes correspondantes de la spécification JIS C 6226-1978 (JIS78). (Source.)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

La fonctionnalité Formes JIS78 est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur jis78. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « jp78 ».

Formes JIS83 (jp83)

Exemple de formes JIS83 en Kozuka Mincho Pr6n :

Exemple d’application du code CSS jp83

Cette fonctionnalité remplace les glyphes japonais par défaut (JIS90) par les formes correspondantes de la spécification JIS X 0208-1983 (JIS83). (Source.)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

La fonctionnalité Formes JIS83 est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur jis83. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « jp83 ».

Formes JIS90 (jp90)

Exemple de formes JIS90 en Kozuka Mincho Pr6n :

Exemple d’application du code CSS jp90

Cette fonctionnalité remplace les glyphes japonais des spécifications JIS78 ou JIS83 par les formes correspondantes de la spécification JIS X 0208-1990 (JIS90). (Source.)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

La fonctionnalité Formes JIS90 est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur jis90. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « jp90 ».

Formes JIS2004 (jp04)

Exemple de formes JIS2004 en Kozuka Mincho Pro :

Exemple d’application du code CSS jp04

Le Conseil national de la langue japonaise a défini de nouvelles formes de glyphes pour un certain nombre de caractères JIS. Ceux-ci ont été incorporés dans la spécification JIS X 0213:2004 en tant que nouvelles formes prototypiques. « jp04 » est un sous-ensemble de la fonctionnalité « nlck ». Elle est utilisée pour accéder à ces glyphes prototypiques de manière à préserver l’intégrité de la spécification JIS X 0213:2004. (Source.)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

La fonctionnalité Formes JIS2004 est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur jis04. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « jp04 ».

Formes traditionnelles (trad)

Exemple de formes traditionnelles en Kozuka Mincho Pr6n :

Exemple d’application du code CSS trad

Remplace les formes kanji du japonais ou hanzi du chinois simplifié par les formes « traditionnelles » correspondantes. (Source.)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

La fonctionnalité de formes traditionnelles est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur « traditional ». Pour obtenir le même effet avec font-feature-settings, utilisez la balise « trad ».

Formes de notation ruby (ruby)

Exemple de formes de notation ruby en Kozuka Mincho Pr6n :

Exemple d’application du code CSS ruby

La typographie japonaise utilise souvent des glyphes kanas plus petits, généralement en exposant, afin de clarifier la signification du kanji avec lequel le lecteur peut ne pas être familier. Ils sont appelés « ruby », du nom qui désignait autrefois la police d’une taille de quatre points dans le domaine de la typographie. Cette fonctionnalité identifie les glyphes de la police qui ont été conçus pour cet usage et les substitue aux conceptions par défaut. (Source.)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

La fonctionnalité de formes de notation ruby est désactivée par défaut. Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-east-asian, utilisez la valeur « ruby ». Pour obtenir le même effet avec font-feature-settings, utilisez la balise « ruby ».

Observez l’élément rt dans l’exemple de code ci-dessus. Le balisage correct du texte ruby est décrit dans la spécification HTM5 du W3C, dans la section traitant de la sémantique au niveau du texte. Notez également que la position et la taille du texte ruby varient en fonction du navigateur et de la version utilisés ; pensez à désactiver les paramètres par défaut du navigateur avec une feuille de style de réinitialisation et à dimensionner/positionner manuellement le texte ruby.

Variantes kana horizontales (hkna)

Exemple de variantes kana horizontales en Kozuka Mincho Pr6n :

Exemple d’application du code CSS hkna

Cette fonctionnalité remplace les caractères kana standard par des formes spécialement conçues pour une écriture strictement horizontale. Cette optimisation typographique permet un meilleur ajustement et une couleur encore plus uniforme. (Source.)

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

La fonctionnalité de variantes kana horizontales est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « hkna ».

Formes Kanji NLC (nlck)

Exemple de formes Kanji NLC en Kozuka Mincho Pr6n :

Exemple d’application du code CSS nlck

En 2000, le Conseil national de la langue japonaise a défini de nouvelles formes de glyphes pour un certain nombre de caractères JIS. La fonctionnalité « nlck » permet d’accéder à ces glyphes. (Source.)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

La fonctionnalité de formes Kanji NLC est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « nlck ».

Formes d’annotation auxiliaires (nalt)

Exemple d’autres formes d’annotation en Kozuka Mincho Pr6n :

Exemple d’application du code CSS nalt

Cette fonctionnalité remplace les glyphes par défaut par diverses formes de notation (par exemple : les glyphes placés dans des cercles, carrés, parenthèses, losanges ou cadres ronds ouverts ou pleins). Il peut arriver qu’une forme d’annotation existe déjà, auquel cas l’utilisateur peut choisir de la remplacer. (Source.)

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

La fonctionnalité de formes d’annotation auxiliaires est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « nalt ».

Italiques (ital)

Exemple d’italiques en Kozuka Mincho Pr6n :

Exemple d’application du code CSS ital

Dans certaines polices (notamment les polices japonaises d’Adobe Pro), les formes romaines et italiques de certains caractères sont regroupées dans une seule police. Cette fonctionnalité remplace les glyphes romains par les glyphes italiques correspondants. (Source.)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

La fonctionnalité d’italiques est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « ital ».

Remarque : À propos des fonctionnalités verticales

Les fonctionnalités OpenType suivantes améliorent l’aspect du texte vertical en réespaçant les glyphes et en les remplaçant. Toutefois, tous les navigateurs ne prennent pas en charge l’orientation verticale. Par conséquent, même si ces fonctionnalités OT sont prises en charge et entièrement opérationnelles, elles n’auront aucune incidence si l’orientation verticale ne l’est pas.

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

Notre code ici repose sur les modes d’écriture CSS de niveau 3 (Editor’s Draft) du W3C et sur cette remarquable recherche de David Storey. Vous pouvez observer l’évolution de cette recherche, mais la prise en charge des navigateurs n’est pas encore satisfaisante. Après avoir testé le code ci-dessus, nous avons constaté que le mode d’écriture fonctionnait uniquement dans Chrome.

Crénage vertical (vkrn)

Cette fonctionnalité adapte l’espace entre les glyphes, généralement dans le but de présenter un espace optiquement uniforme entre les glyphes. Une police de caractères bien conçue s’accompagne généralement d’un espacement entre les glyphes globalement cohérent. Il arrive toutefois que certaines combinaisons de glyphes doivent être adaptées afin d’en améliorer la lisibilité. Outre les ajustements standard de l’orientation verticale, cette fonctionnalité peut fournir des données de crénage selon la taille au moyen des tables de l’appareil, de crénage « inter-flux » dans le texte orienté horizontalement, ainsi qu’un ajustement de la position des glyphes indépendant de l’ajustement avancé. Remarque : Cette fonctionnalité peut s’appliquer aux séries de plus de deux glyphes et n’est pas utilisée dans les polices à chasse fixe. En outre, cette fonctionnalité s’applique uniquement au texte défini verticalement. (Source.)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

La fonctionnalité de crénage vertical est désactivée par défaut. Elle n’est pas prise en charge dans IE ni dans aucune version de Safari sur Mac OS ou iOS. En outre, même si elle peut être prise en charge dans Firefox, le texte vertical ne l’est pas, ce qui la rend inopérationnelle. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « vkrn ». Si la propriété vkrn est activée, la propriété vpal doit l’être également, si elle existe. Voir aussi : Syntaxe d’utilisation de plusieurs fonctionnalités OpenType et Remarque : À propos des fonctionnalités verticales.

Variantes verticales (vert)

En mode d’écriture verticale, cette fonctionnalité remplace les formes par défaut par des variantes adaptées à l’écriture verticale. La plupart des glyphes CJCV restent verticaux en mode d’écriture verticale. Il arrive toutefois que certains adoptent une autre forme (généralement pivotée et repositionnée). Les glyphes affectés par cette fonctionnalité correspondent à l’ensemble normalement pivoté dans les applications de PAO bas de gamme. (Source.)

La fonctionnalité de variantes verticales est activée par défaut, ce qui signifie qu’elle fonctionne normalement sans qu’il faille écrire le moindre code CSS. Cependant, elle n’est activée par défaut dans aucune version d’IE ou de Firefox. Ajoutons encore qu’elle ne peut pas être activée dans Safari (Mac ou iOS). Voir aussi Remarque : À propos des fonctionnalités verticales.

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « vert ».

Mesures verticales auxiliaires proportionnelles (vpal)

Cette fonctionnalité réespace les glyphes conçus pour être définis sur des hauteurs de cadratin, en les ajustant par rapport à des hauteurs verticales individuelles (plus ou moins proportionnelles). Contrairement à la balise valt, cette fonctionnalité ne remplace pas ces glyphes par de nouveaux glyphes (fonctionnalité GPOS et non GSUB). Il est possible que l’utilisateur préfère utiliser des formes à chasse fixe ou simplement s’assurer que le glyphe est bien adapté. (Source.)

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

La fonctionnalité de mesures verticales auxiliaires proportionnelles est désactivée par défaut. Elle n’est pas prise en charge dans IE ni dans aucune version de Safari sur Mac OS ou iOS. En outre, même si elle peut être prise en charge dans Firefox, le texte vertical ne l’est pas, ce qui la rend inopérationnelle. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « vpal ». Voir aussi Remarque : À propos des fonctionnalités verticales.

Demi-mesures verticales auxiliaires (vhal)

Cette fonctionnalité réespace les glyphes conçus pour être définis sur des hauteurs de cadratin, en les ajustant par rapport à des hauteurs d’un demi-cadratin. (Source.)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

La fonctionnalité de demi-mesures verticales auxiliaires est désactivée par défaut. Elle n’est prise en charge dans aucune version d’IE, de Firefox ou de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « vhal ». Voir aussi Remarque : À propos des fonctionnalités verticales.

Variantes kana verticales (vkna)

Cette fonctionnalité remplace les caractères kana standard par des formes spécialement conçues pour une écriture strictement verticale. Cette optimisation typographique permet un meilleur ajustement et une couleur encore plus uniforme. Voir aussi hkna. (Source.)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

La fonctionnalité de variantes kana verticales est désactivée par défaut. Elle n’est prise en charge dans aucune version de Safari sur Mac OS ou iOS. Pour l’activer, il convient d’utiliser la propriété font-feature-settings à l’aide de la balise « vkna ». Voir aussi Remarque : À propos des fonctionnalités verticales.

Crénage (kern)

Exemple de crénage défini en Source Sans Pro :

Exemple d’application du code CSS kern

Cette fonctionnalité adapte l’espace entre les glyphes, généralement dans le but de présenter un espace optiquement uniforme entre les glyphes. Une police de caractères bien conçue s’accompagne généralement d’un espacement entre les glyphes globalement cohérent. Il arrive toutefois que certaines combinaisons de glyphes doivent être adaptées afin d’en améliorer la lisibilité. Remarque : Cette fonctionnalité peut s’appliquer aux séries de plus de deux glyphes et n’est pas utilisée dans les polices à chasse fixe. En outre, cette fonctionnalité ne s’applique pas au texte défini verticalement. (Source.)

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

La fonctionnalité de crénage est désactivée par défaut. Toutefois, il est souvent important de l’activer.

Pour l’activer avec la propriété font-kerning, utilisez la valeur « normal ». Pour obtenir le même effet avec font-feature-settings, utilisez la balise « kern ».

Composition/décomposition des glyphes (ccmp)

Exemple de composition/décomposition des glyphes en Source Han Sans :

Exemple d’application du code CSS ccmp

Afin de réduire le nombre de variantes de glyphes, il est parfois utile de décomposer un caractère en deux glyphes. De plus, afin d’optimiser le traitement des glyphes, il peut être préférable de composer deux caractères en un seul glyphe. Cette fonctionnalité rend cela possible. Elle doit être utilisée en premier et uniquement lorsque cela s’avère nécessaire. (Source.)

La fonctionnalité de composition/décomposition des glyphes est activée par défaut, ce qui signifie qu’elle fonctionne normalement sans qu’il faille écrire de code CSS. Toutefois, certaines conditions doivent être remplies pour s’assurer qu’elle est réellement activée. Cette fonctionnalité n’est pas activée par défaut dans Chrome ni dans Safari, mais le recours à la valeur font-feature-settings l’activera.

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

Pour vous assurer que la fonctionnalité de composition/décomposition des glyphes est activée, utilisez explicitement la balise « ccmp » (ou toute autre valeur font-feature-settings).

Formes locales (locl)

De nombreuses cursives servant à l’écriture de plusieurs langues dans des zones géographiques étendues ont élaboré des variantes locales de lettres spécifiques, utilisées par des communautés littéraires individuelles. Par exemple, un certain nombre de lettres des alphabets bulgare et serbe présentent des formes distinctes d’un alphabet à un autre ou par rapport à l’alphabet russe. Dans certains cas, la forme locale ne diffère que très légèrement de la forme « normale » de la cursive ou, au contraire, en est radicalement différente. Cette fonctionnalité permet aux formes locales de glyphes de se substituer aux formes par défaut. (Source.)

La fonctionnalité de formes locales est activée par défaut, ce qui signifie qu’elle fonctionne normalement sans qu’il faille écrire de code CSS. Cependant, elle n’est, en fait, activée par défaut que dans Firefox et n’est pas prise en charge dans Safari (Mac ou iOS) ni sur Android.

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

Pour vous assurer que la fonctionnalité de formes locales est activée, utilisez explicitement la balise « locl ».

Exposant (sups)

Exemple d’exposant en Hypatia Sans Pro.

Exemple d’application du code CSS sups

Cette fonctionnalité remplace des chiffres alignés ou arabes non alignés par des chiffres supérieurs (principalement pour des indications de note de bas de page) et remplace les lettres minuscules par des lettres supérieures (principalement pour les titres français en abrégé).

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

La fonctionnalité d’exposant est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-position, utilisez la valeur super. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « sups ».

Indice (subs)

Exemple d’indice en Warnock Pro.

Exemple d’application du code CSS subs

Cette fonctionnalité peut remplacer un glyphe par défaut par un glyphe en indice ou combiner un remplacement de glyphe avec des réglages de positionnement pour un positionnement correct.

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

La fonctionnalité d’indice est désactivée par défaut.

Pour l’activer avec la propriété font-variant ou la sous-propriété font-variant-position, utilisez la valeur sub. Pour obtenir le même effet avec font-feature-settings, utilisez la balise « subs ».

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne