Font-variation-settings - Propriété CSS
Résumé des caractéristiques de la propriété font-variation-settings
normalnormalSchéma syntaxique de font-variation-settings.
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
axeest un code indiquant l'axe choisi. Il doit être inscrit entre apostrophes ou guillemets.numberest un nombre sans unité. La plage des valeurs autorisées dépend de l'axe choisi.
Description de la propriété font-variation-settings.
font-variation-settings présente de nombreux problèmes de compatibilité sur plusieurs navigateurs.
De plus son efficacité dépend de la police utilisée.
La propriété CSS font-variation-settings donne accès à des possibilités des polices TTF, OTF ou WOFF,
qui ne sont pas gérées par une propriété CSS spécifique, mais qui peuvent, dans certains cas assez rares, être utiles.
Il est bien entendu conseillé d'utiliser la propriété dédiée lorsqu'elle existe, et de réserver l'usage de font-variation-settings
aux cas très particuliers.
font-variation-settings: 'wght' 500;
/* Peut avantageusement être remplacé par */
font-weight: bold;
Voir aussi la propriété font-feature-settings.
Syntaxes pour font-variation-settings.
- font-variation-settings: normal;
Aucune fonctionnalité de police n'est demandée. Cette valeur peut être utile pour désactiver une règle reçue par héritage.
- font-variation-settings: 'axe' valeur;
axeest le code de l'un des nombreux axes de Open Type Features. Par exemple, l'axe'wdth'gère la largeur des caractères, l'axe'ital'gère l'inclinaison des caractères, etc.valeurest une information complémentaire, souvent numérique. Par exemple, l'axe'wght'(gras) nécessite une valeur de100à900indiquant l'épaisseur de la graisse des caractères. - font-variation-settings: 'axe1' valeur1, 'axe2' valeur2;
Plusieurs axes avec leur valeur peuvent être spécifiés, en séparant les groupes axe-valeur par des virgules.
Si certains des axes indiqués ne sont pas pris en charge par la police de caractères utilisée, il sont tout simplement ignorés, sans que la règle dans son ensemble soit considérée comme en erreur. Autrement dit, si d'autres axes sont précisés et sont corrects, ils seront pris en compte malgré la présence des axes erronés.
Valeurs standards acceptées par toutes les propriétés:
font-variation-settings: initial (normal)
font-variation-settings: inherit
font-variation-settings: revert
font-variation-settings: revertLayer
font-variation-settings: unset
Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.
Animation de la propriété font-variation-settings.
L'animation de la propriété font-variation-settings est possible à condition que les étapes successives concernent le ou les mêmes axes.
Par exemple si l'étape 1 (from) comporte une déclaration concernant l'axe wght, alors l'étape suivante devra également comporter
une déclaration sur ce même axe.
Simulateur avec la propriété font-variation-settings.
Sur la police choisie (Noto Sans), la graisse (axe 'wght') évolue sur la plage de 100 à 100,
et la largeur des caractères (axe 'wdth') de 62.5 à 100.
Prise en charge par les navigateurs (compatibilité).
Peu de navigateurs prennent en charge la propriété font-variation-settings, et d'autre part, toutes les polices de caractères ne
supportent pas cette fonctionnalité.
font-variation-settingsNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
Safari
Safari sur IOS
Samsung Internet
KaiOS Browser
Opéra mini
Historique de la propriété font-variation-settings.
-
Module CSS - Polices de caractères - Niveau 4
Présentation initiale de cette propriétéfont-variation-settings.
11 Juillet 2017Document de travail.
Voir aussi, à propos des polices de caractères.
Les propriétés concernant les polices de caractères sont nombreuses. Elles sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.