Utilisation des propriétés personnalisées CSS pour ajuster les poids de police variables en mode sombre

Impact du mode noir sur la lisibilité au texte: une solution CSS utilisant des polices variables

Le mode sombre, bien quehétique, présente souvent un défi: le texte peut apparaître plus lourd dans les arrière-plans sombres. Cet article explore les solutions utilisant des propriétés personnalisées CSS et des polices variables pour résoudre ce problème, garantissant une apparence de texte cohérente à travers les modes clairs et sombres.

Le problème n'est pas une illusion; Les personnages plus clairs apparaissent vraiment plus audacieux sur des arrière-plans plus sombres. Ceci est facilement observable lors de la comparaison du texte léger et du mode sombre, et devient encore plus clair lors de l'inversion des couleurs.

Solutions utilisant des polices variables

Les polices variables offrent une solution puissante. L'effet idéal implique une amincissement subtilement le texte en mode sombre sans modifier la largeur du caractère. Nous pouvons y parvenir à travers plusieurs stratégies:

1. Ajustement manuellement font-weight : cela implique de modifier directement les valeurs de font-weight dans une requête multimédia en mode sombre. Bien que fonctionnel, il devient lourd avec de nombreux éléments.

2. Multiplicateur font-weight : une approche plus élégante utilise une propriété personnalisée CSS ( --font-weight-multiplier ) pour contrôler le réglage du poids. Ce multiplicateur modifie font-weight par défaut de chaque élément en mode sombre. Par exemple, le réglage --font-weight-multiplier à 0,85 réduit le poids de 15%.

3. Sélecteur et multiplicateur universel: cette technique avancée exploite la portée variable CSS et le sélecteur universel ( * ) pour appliquer le calcul du multiplicateur à l'échelle mondiale. Cela simplifie le CSS mais nécessite une attention particulière pour éviter les effets involontaires sur des éléments spécifiques.

4. font-variation-settings et manipulation de l'axe: certaines polices variables offrent des axes comme "Grad" (grade) ou "DRKM" (mode sombre) qui contrôle directement le poids apparent sans affecter la largeur du caractère. Roboto Flex utilise "Grad", tandis que la police DarkMode DarkMode de Dalton Maag dispose de l'axe "DRKM".

Stratégie 1: manipulation font-weight

La méthode la plus simple est d'ajuster manuellement font-weight pour chaque élément d'une requête multimédia en mode sombre. Cependant, cela devient moins gérable à mesure que le nombre d'éléments augmente.

 / * Par défaut (mode lumineux) CSS * /
Corps {Font-Weight: 400; }
Strong {Font-Weight: 700; }

/ * Mode sombre CSS * /
@Media (préfère-Color-Scheme: Dark) {
  Corps {Font-Weight: 350; }
  Strong {Font-Weight: 600; }
}

Stratégie 2: Multiplicateur font-weight avec des propriétés personnalisées

L'utilisation d'une propriété personnalisée ( --font-weight-multiplier ) fournit une solution plus maintenable.

 / * Propriétés personnalisées spécifiques au mode noir * /
@Media (préfère-Color-Scheme: Dark) {
  : root {--font-weight-multiplier: .85; }
}

/ * Styles CSS par défaut ... * /
Corps {Font-Weight: Calc (400 * var (- Font-Weight-Multiplier, 1)); }
Strong {Font-Weight: Calc (700 * var (- Font-Weight-Multiplier, 1)); }

Stratégie 3: sélecteur universel et multiplicateur

Cette approche applique le multiplicateur à tous les éléments à la fois.

 / * Propriétés personnalisées par défaut * /
: root {--font-weight: 400; --font-poids-multiplicateur: 1; }
Strong {--font-weight: 700; }

/ * Propriétés personnalisées spécifiques au mode noir * /
@Media (préfère-Color-Scheme: Dark) {
  : root {--font-weight-multiplier: .85; }
}

/ * Application des propriétés personnalisées ... * /
* {Font-Weight: Calc (var (- Font-Weight, 400) * var (- Font-Weight-Multiplier, 1)); }

Stratégie 4: Manipulation des axes avec font-variation-settings

Les polices avec des axes "Grad" ou "DRKM" offrent un contrôle direct sur le poids.

 / * Pour Roboto Flex (axe "grad") * /
: root {--grad: 0; }
@media (préfère-Color-Scheme: Dark) {: root {--grad: -.75; }}
Corps {Font-Variation-Settings: "Grad" var (- Grad, 0); }

Considérations supplémentaires

• Écrans à haute résolution: L'effet est moins prononcé sur les écrans de rétine. Ajustez les multiplicateurs en conséquence.
• Polices mixtes: Considérez soigneusement l'impact sur les polices avec différents axes ou polices non variables.
• Espacement des lettres: La baisse du poids de la police peut étroiter les caractères. Ajustez l'espacement des lettres au besoin.

En tirant parti de ces techniques, les développeurs peuvent assurer un texte cohérent et lisible à travers des modes clairs et sombres, améliorant l'expérience utilisateur globale. Une démo présentant ces stratégies est disponible [lien vers la démo].

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!