Paramètres de police de caractères - Astuces CSS

Cette propriété nous permet de contrôler les paramètres typographiques avancés tels que les petites majuscules, les ligatures et les swashes. Pour les activer, vous devez déclarer la valeur dont vous avez besoin entre guillemets, puis suivi par 1ou onpour activer. Vous pouvez également les désactiver avec 0ou off:

.element ( /* these two values do the same thing */ font-feature-settings: "liga" 1; font-feature-settings: "liga1" on; )

De nombreuses autres valeurs, en plus des ligatures standard, sont prises en charge par la font-feature-settingspropriété, y compris les petites majuscules:

.element ( font-feature-settings: "smcp" 1; )

Valeurs

Voici une liste de toutes les valeurs prises en charge par font-feature-settings, mais assurez-vous de vérifier que la police Web que vous utilisez prend également en charge ces valeurs avant de les essayer:

liga: ligatures standards
dlig: ligatures discrétionnaires
onum: personnages de style ancien
lnum: doublure chiffres
tnum: figures tabulaires
zero: zéro barré
frac: fractions
sups: exposant
subs: indice
smcp: lettres minuscules
c2sc: petites capitales des capitales
case: formulaires sensibles à la casse
hlig: ligatures historiques
calt: alternatives contextuelles
swsh: swashes
hist: formes historiques
ss**: ensembles stylistiques
kern: crénage
locl: formes localisées
rlig: ligatures requises
medi: formes médiales
init: formes initiales
isol: formes isolées
fina: formes finales
mark: marque
mkmk positionnement marque à marque

Combinaison de plusieurs paramètres

Pour ajouter plusieurs fonctionnalités, vous devez suivre une valeur par une autre dans une liste séparée par des virgules, comme ceci:

.element ( font-feature-settings:"smcp" 1, "onum" 1; )

Préfixes

Pour obtenir le meilleur support sur tout le spectre du navigateur, assurez-vous d'utiliser ces préfixes:

.element ( -webkit-font-feature-settings: "smcp" 1; -moz-font-feature-settings: "smcp" 1; -ms-font-feature-settings: "smcp" 1; font-feature-settings: "smcp" 1; )

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.