start

CSS

Details
Category: CSS

1️⃣ font-variation-settings (Contrôle direct des axes variables)

Permet de régler précisément les valeurs des axes de variation de la police. Chaque police a ses propres axes, mais voici les plus courants :

css
 
h1 {
font-family: 'Halibut', sans-serif; font-variation-settings: 'wght' 100, 'wdth' 100, 'slnt' 0, 'opsz' 14; }

? Explication des axes courants :

  • 'wght' (Weight) → Poids (Ex: 20-100 pour Halibut, 100-900 pour d’autres)
  • 'wdth' (Width) → Largeur (Ex: 75–125 pour certains fonts)
  • 'slnt' (Slant) → Inclinaison (Ex: 0 pour droit, -10 pour légèrement incliné)
  • 'opsz' (Optical Size) → Taille optique (Ex: 8–72 selon la police)

2️⃣ font-weight (Alias pour wght)

Si ta police supporte le poids variable, tu peux l'utiliser directement (mais fonctionne mieux sur des plages standard comme 100-900).

css
h1 { font-weight: 100; /* Ex : Pour une plage 20-100, utilise les valeurs correspondantes */ }

3️⃣ font-stretch (Alias pour wdth)

Si la police supporte la largeur variable (compression ou expansion) :

css
 
h1 { font-stretch: 85%; /* Exemple : Min 75% - Max 125% */ }

4️⃣ font-style (Alias pour slnt)

Pour les polices qui ont une variation d'inclinaison au lieu d'une simple italique :

css
 
h1 { font-style: oblique -10deg; /* Plutôt que italic */ }

Ou en variable font :

css
 
h1 { font-variation-settings: 'slnt' -10; }

5️⃣ font-optical-sizing (Alias pour opsz)

Certaines polices s'adaptent en fonction de la taille du texte (pour améliorer la lisibilité) :

css
 
h1 { font-optical-sizing: auto; /* Ou 'none' pour désactiver */ }

? Exemple Complet : CSS Optimisé

css
 
@font-face { font-family: 'Halibut'; src: url('/fonts/Halibut-Variable.woff2') format('woff2'); font-weight: 20 100; font-stretch: 75% 125%; font-style: normal; font-display: swap; } h1 { font-family: 'Halibut', sans-serif; font-weight: 100; /* Max possible */ font-stretch: 100%; /* Largeur normale */ font-style: oblique -5deg; /* Légère inclinaison */ font-variation-settings: 'wght' 100, 'wdth' 100, 'slnt' -5; }

? Résumé : Quand utiliser quoi ?

Propriété CSS Équivaut à font-variation-settings ? Usage
font-weight 'wght' Poids du texte
font-stretch 'wdth' Largeur du texte
font-style 'slnt' Inclinaison du texte
font-optical-sizing 'opsz' Taille optique automatique
font-variation-settings Direct Contrôle précis des variations



Page 1 of 11