Mode sombre et polices variables

Nous avons déjà discuté du mode sombre dans CSS, et j'ai pensé à un problème: le texte blanc est généralement moins lisible sur un fond noir que le texte noir sur fond blanc. Après quelques réflexions, j'ai réalisé que nous pouvons résoudre ce problème en utilisant des polices variables pour réduire le poids du texte en mode sombre!

L'exemple suivant montre ce problème, j'ai utilisé la police Yanone Kaffesatz de Google Fonts. Notez que la partie du texte blanc sur un fond noir est plus épais que la partie du texte noir sur un fond blanc.

Étrangement, ces deux paragraphes de texte utilisent en fait la même valeur de poids de la police de 400. Mais à mon avis, le texte blanc semble particulièrement épais et noir sur fond noir.

Examinez de plus près cet exemple. C'est ainsi que le texte blanc s'affiche sur un fond plus sombre; C'est ainsi que nos yeux perçoivent les formes et les couleurs. Dans certains cas, ce n'est peut-être pas un gros problème, mais lire du texte clair sur fond sombre est toujours plus difficile. Si nous ne faisons pas attention lors de la conception du texte en mode noir, nous pouvons sentir le texte vibrer lors de la lecture.

Comment pouvons-nous résoudre ce problème?

C'est là que les polices variables entrent en jeu! Nous pouvons utiliser une épaisseur de police plus légère pour rendre le texte plus facile à lire lorsque le mode obscur est activé:

 <code>body { font-weight: 400; } @media (prefers-color-scheme: dark) { body { font-weight: 350; } }</code>

Voici l'effet de l'utilisation de ce nouvel exemple:

Beaucoup mieux! À mon avis, ces deux variantes semblent maintenant être beaucoup plus équilibrées.

Encore une fois, c'est juste une petite différence, mais tous les excellents modèles incluent un réglage aussi fin. Je pense que si vous utilisez déjà des polices variables et que vous chargez toutes ces épaisseurs, vous devez certainement ajuster le texte pour le rendre plus facile à lire.

Cet effet est plus facile à repérer si nous comparons les différences entre les segments de texte plus longs. Cette fois, nous utilisons des polices de littérade:

Notez que le texte à droite est plus épais, mais ce n'est pas le cas. Ce n'est qu'une illusion visuelle - l'épaisseur de la police des deux exemples ci-dessus est de 500.

Ainsi, pour résoudre ce problème, nous pouvons faire de même que l'exemple ci-dessus:

 <code>body { font-weight: 500; } @media (prefers-color-scheme: dark) { body { font-weight: 400; } }</code>

Encore une fois, il s'agit d'un changement subtil, mais c'est important car à ces tailles, chaque amélioration de la typographie que nous apportons contribue à l'expérience de lecture.

Il y a aussi une petite invite de polices Google!

Google Fonts vous permet de passer par le document Partiellement ajouté<code><link> Tags pour ajouter des polices à votre site Web comme suit:

 <code><link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet"></code>

Cela utilise la police Rosario et ajoute l'épaisseur de la police de 515 - il s'agit wght@515 du code ci-dessus. Même si cela se trouve être une police variable, seule cette épaisseur de police sera téléchargée. Mais si nous essayons de faire ça ...

 <code>body { font-weight: 400; }</code>

... rien ne se passera! En fait, la police ne se charge pas du tout. Au lieu de cela, nous devons déclarer la plage des valeurs d'épaisseur de police que nous voulons, comme suit:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300..500&display=swap" rel="stylesheet"></code>

La section @300..500 dans le code ci-dessus indique à Google Fonts de télécharger des fichiers de police avec toutes les épaisseurs entre 300 et 500. Alternativement, l'ajout d'un point-virgule entre chaque épaisseur ne téléchargera que 300 et 500 épaisseurs - donc, par exemple, vous ne pouvez pas sélectionner une épaisseur 301:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300;500&display=swap" rel="stylesheet"></code>

Il m'a fallu quelques minutes pour comprendre ce qui n'a pas fonctionné et pourquoi les polices ne se chargeaient pas du tout, alors j'espère que l'équipe de polices Google rendra le code intégral un peu plus clair à l'avenir. Peut-être qu'une option ou un interrupteur à bascule devrait être ajouté quelque part pour sélectionner la plage ou le poids spécifique (ou peut-être que je ne l'ai pas vu).

Quoi qu'il en soit, je pense que c'est pourquoi les polices mutables sont si utiles; Ils nous permettent d'ajuster le texte d'une manière que nous n'avons jamais pu le faire auparavant. Alors, vive la police variable!

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!