Catégories
Astuces et Design

300 considérés comme dangereux (et une solution de contournement de fontconfig) – Tomáš Janoušek, Blog

publié (Historique des révisions)

De nombreuses pages Web définissent de nos jours font-weight: 300 dans leur feuille de style. Avec
DejaVu Sans comme police préférée, ceci
donne un texte très fin et léger, difficile à lire, car pour certains
raison pour laquelle la variante «DejaVu Sans ExtraLight» (poids 200) est utilisée pour
poids <360 (dans Chrome; dans Firefox jusqu'à 399). Voyons pourquoi cela
se produit et ce qui peut être fait à ce sujet.

Table des matières

Le problème

Voici à quoi ressemble une page de test sur mon
ordinateur portable (14 "1920 x 1080):

Test de DejaVu Linux

DejaVu Sans à différents poids de police

À titre de comparaison, et peut-être aussi pour expliquer pourquoi les concepteurs Web utilisent
font-weight: 300, voici un tableau des différents poids de police de DejaVu Sans sur
mon système et la police sans-serif par défaut sur MacOS Catalina et Android
(Malheureusement, je n'ai pas d'ordinateur portable HiDPI ou de smartphone à faible DPI, donc le
la comparaison peut être imprécise / injuste):

Comparaison d'audace (mis à l'échelle pour égaler
la taille)

Lissage des polices MacOS, CSS

Sous MacOS, font-weight: normal semble presque audacieux, donc les concepteurs Web qui utilisent
MacOS / Safari peut utiliser font-weight: 300 à compenser cela, le ruiner
pour tout le monde
. 🙁

Eh bien, en fait pas tout le monde, comme certains utilisateurs de bureau (par exemple, un DVD Fedora Live)
n’aura pas de variante extra-légère de sans empattement, donc la version normale (régulière ou
book) sera utilisé pour tous les poids. Mais les utilisateurs d'Android et le bureau
utilisateurs avec DejaVu (utilisé par défaut sur la plupart des distributions Linux, pas sûr
quel est l'état actuel) et peut-être aussi les utilisateurs de Windows sont concernés.

Nikita Prokopov a suggéré que la désactivation du lissage des polices sous MacOS réduit le
audace
, et mon
les expériences le confirment. De plus, le lissage des sous-pixels
(anti crénelage) vient quelque part au milieu entre le
par défaut et pas de lissage (sur mon écran).

Effet de la désactivation du lissage des polices sous MacOS
Comparaison d'audace, cette fois sans lissage
dans MacOs

Quoi qu'il en soit, nous ne pouvons pas rejeter tout le blâme sur les concepteurs Web. Assortir un extra-léger
police avec font-weight: 300 ne semble pas être une bonne idée, et la faire correspondre
avec font-weight: 350 est tout simplement idiot (et je devrais utiliser explicitement
langage pour décrire mes sentiments à propos de Firefox en utilisant une police extra-légère pour
font-weight: 399).

En fait, nous pouvons mettre tout le blâme sur eux, car font-weight: 300 a toujours
(même en CSS niveau 1) signifiait
"Plus léger que la normale, même si la seule police plus légère est de 100". " Firefox
comportement de sélection d'une police extra-légère pour font-weight: 399 est en fait
conforme au projet de spécification le plus récent.

Le rendu un peu plus audacieux des polices de poids normal sous MacOS est donc un
très faible excuse pour utiliser font-weight: 300, qui force littéralement le
navigateur pour ne pas utiliser une police de poids normal (ou plus audacieuse) à moins qu'il n'y ait pas d'autre
police disponible.

Avec cela à l'écart, passons enfin à réparer contourner le
problème, car persuader des milliers de développeurs Web de réparer leurs sites Web
ne semble pas faisable à ce stade.

Linux, fontconfig, CSS

La sélection et l'apparence des polices sous Linux sont
très
configurable
via fontconfig. C'est à la fois une malédiction et une bénédiction. Dans ce cas, c'est
tout à fait avantageux.

Il existe quelques utilitaires de ligne de commande pratiques qui facilitent grandement le test
la configuration. J'utiliserai fc-list et fc-match ici pour voir ce que
polices que j'ai et quand DejaVu Sans ExtraLight est utilisé:

$ fc-list | grep -F -w 'DejaVu Sans' | sort
/usr/share/fonts/truetype/dejavu/DejaVuSans-BoldOblique.ttf: DejaVu Sans:style=Bold Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-BoldOblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold Oblique,Bold Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-Bold.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold,Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-Oblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Oblique,Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed,Book
/usr/share/fonts/truetype/dejavu/DejaVuSans-ExtraLight.ttf: DejaVu Sans,DejaVu Sans Light:style=ExtraLight
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-BoldOblique.ttf: DejaVu Sans Mono:style=Bold Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf: DejaVu Sans Mono:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Oblique.ttf: DejaVu Sans Mono:style=Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSans-Oblique.ttf: DejaVu Sans:style=Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/fonts/truetype/ttf-dejavu/DejaVuSansMono-Bold.ttf: DejaVu Sans Mono:style=Bold
/usr/share/fonts/truetype/ttf-dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
$ fc-match -v sans 
  | grep -F -w -e style: -e weight: -e fullname:
        style: "Book"(s)
        fullname: "DejaVu Sans"(s)
        weight: 80(f)(s)

$ fc-match -v sans:weight=extralight 
  | grep -F -w -e style: -e weight: -e fullname:
        style: "ExtraLight"(s)
        fullname: "DejaVu Sans ExtraLight"(s)
        weight: 40(f)(s)

$ fc-match -v sans:weight=60 | grep -F -w -e weight: 
        weight: 40(f)(s)

$ fc-match -v sans:weight=61 | grep -F -w -e weight: 
        weight: 80(f)(s)

$ fc-match -v sans:weight=139 | grep -F -w -e weight: 
        weight: 80(f)(s)

$ fc-match -v sans:weight=140 | grep -F -w -e weight: 
        weight: 200(f)(s)

Fontconfig définit ces poids de police symboliques:

constant valeur
mince 0
lumière supplémentaire 40
ultraléger 40
lumière 50
demi-lumière 55
demi-nuit 55
livre 75
régulier 80
Ordinaire 80
moyen 100
demibold 180
demi-temps 180
audacieux 200
extrabold 205
noir 210
lourd 210
Constantes de poids Fontconfig

Apparemment, fontconfig sélectionne la police avec le poids le plus proche demandé.
Ce n’est pas ce dont le CSS a besoin, donc les navigateurs n’utilisent probablement pas
les modèles de police fontconfig et donc les moyens habituels de fontconfig d'éviter
la police extra-légère ne
travail.

Mais attendez. En fait, certains navigateurs le font. Le navigateur de surf, construit avec
WebKitGTK, traduit font-weigth: 300 au poids de fontconfig 50,
font-weight: 200 à fontconfig poids 40 et font-weight: 100 à
fontconfig weight 0, ce qui est un mappage correct, mais cela n'entraînera pas
comportement correct si seuls les poids de police 0 et 80 sont disponibles, car 80 est plus proche
à 60, mais CSS exige que 0 soit choisi. (Pour le savoir, j'ai utilisé
FC_DEBUG=1 surf.) En effet, la configuration de fontconfig proposée dans le lien
ci-dessus est une solution de contournement suffisante pour le navigateur WebKitGTK:

surfer avant
$ FC_DEBUG=1 surf test.html |& grep -F -w -c ExtraLight
7
~ / .config / fontconfig / fonts.conf



	 target="pattern">
		 qual="any" name="family">
			DejaVu Sans
		
		 name="weight" compare="less">
			book
		
		 name="weight" mode="assign" binding="same">
			book
		
	

surfer après
$ FC_DEBUG=1 surf test.html |& grep -F -w -c ExtraLight
0

Dans un vrai navigateur conforme CSS, cela ne fonctionnera pas comme fontconfig est
probablement utilisé uniquement pour répertorier les polices disponibles et l'algorithme de correspondance des polices
s'exécute ensuite dans le moteur du navigateur lui-même. On pourrait aussi tenter désespérément de
utiliser fontconfig target="scan"> baisser
le poids de la police à 0 et j'espère que le navigateur sélectionnera la plus proche,
variante normale. Ou du moins, je l'ai essayé désespérément. Cela ne fonctionnera pas,
Soit:

  1. CSS préfère toujours une police de poids 0 pour font-weight: 300 lorsque les deux poids 0
    et le poids 400 sont disponibles.

  2. target="scan"> doit être appliqué
    Les caches à l'échelle du système et fontconfig doivent ensuite être régénérés à l'aide
    fc-cache par root, car apparemment les caches à l'échelle du système sont préférés.
    Par conséquent, il est également impossible d'appliquer cette règle uniquement à un navigateur Web.

Il reste une option, heureusement: , qui contrôle l'ensemble des polices disponibles. Sa documentation
est assez élevé et à certains égards carrément incorrect, mais en lisant
la source
nous pouvons en conclure que cela fonctionne comme ceci:

  1. Tout d'abord, vérifiez si le nom de fichier est explicitement accepté par . Si ce n'est pas le cas, vérifiez s'il est rejeté,
    et uniquement si elle n'est pas acceptée mais explicitement rejetée, ignorez la police.
    Sinon, continuez.

    (La documentation affirme que seulement
    filtre les répertoires, mais ce n'est heureusement pas vrai.)

  2. Ensuite, de même, vérifiez si la police correspond à une acceptation (ceux-ci peuvent tester diverses propriétés de police). Si
    non, vérifiez les motifs de rejet et ignorez la police si elle est rejetée et non acceptée.
    Sinon, continuez et autorisez l'utilisation de la police.

  3. L'ordre des directives de configuration n'a pas d'importance, il est simplement ajouté à
    glob / pattern accepte / rejette les listes lors de la lecture de la configuration.

La solution

Fontconfig laisse-nous cacher DejaVu
Sans ExtraLight depuis le navigateur. Si nous voulons garder la police disponible pour
d'autres applications (si ce n'est pas le cas, il sera peut-être plus facile de simplement désinstaller
it), créons une configuration de fontconfig spécifique au navigateur:

~ / .config / fontconfig / browser.conf



	fonts.conf

	
	
		
			*/DejaVuSans-ExtraLight.ttf
		
	

Lorsque nous définissons maintenant le FONTCONFIG_FILE=~/.config/fontconfig/browser.conf
variable d'environnement, DejaVu Sans ExtraLight est introuvable:

$ FONTCONFIG_FILE=~/.config/fontconfig/browser.conf 
  fc-match -v sans:weight=40 | grep -F -w -e weight:
        weight: 80(f)(s)

$ FONTCONFIG_FILE=~/.config/fontconfig/browser.conf 
  fc-list | grep -F -w -c ExtraLight
0

Réglage FONTCONFIG_FILE=~/.config/fontconfig/browser.conf car le navigateur est
lancé est laissé comme exercice au lecteur.

Annexe A: Pourquoi glob?

Un lecteur attentif aurait pu remarquer que la solution pourrait être
robuste en utilisant au lieu de et correspondant au poids de la police, désactivant ainsi tout
polices légères. C'est probablement correct, mais pas utilisable dans mon cas, comme je l'ai déjà
utiliser des modèles d'acceptation pour limiter les polices disponibles à quelques polices raisonnables
ceux
pour empêcher les concepteurs Web de sélectionner une police difficile à lire
visages. Avec l'avènement des polices Web, cette solution de contournement est devenue moins efficace
dernièrement. 🙁


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *