web-dev-qa-db-fra.com

Solution de contournement des polices de grande taille pour Firefox 22+

Je travaille sur un site Web et Firefox affiche sa police extrêmement grande. Chrome et Safari affichent une taille de police normale. Chrome utilise le moteur de rendu WebKit. Firefox utilise le moteur Gecko. J'ai constaté que vous pouvez modifier l'affichage des polices dans Firefox en tapant

about:config

dans la barre d’adresse firefox et en changeant la

 layout.css.devPixelsPerPx

value to 1. Bien que cela puisse fonctionner sur certains systèmes, je ne veux pas que mon utilisateur ait à le faire.

Comment puis-je m'assurer que la police est affichée correctement? J'ai essayé d'ajuster CSS avec

-moz-font-size

et des variantes mais ça ne marche pas. Je ne peux vraiment pas changer tout mon texte en images, c'est faux. Existe-t-il une syntaxe spécifique pour cela? Ou toute solution de contournement suggérée qui serait optimale?

ChromeChrome image

Firefoxenter image description here

fontsfirefox
5
RobSeg

Comme spécifié dans les commentaires, les polices très grandes dans Firefox sembleraient être causées par la propriété font-size-adjust (qui, incidemment, n'est prise en charge que par Firefox actuellement, autant que je sache). Supprimer complètement cette propriété (ou lui attribuer une valeur appropriée - voir ci-dessous) résout le problème dans Firefox.

L'idée derrière font-size-adjust est de rendre les polices de secours plus lisibles. lorsque leurs hauteurs x diffèrent de la police principale. Cependant, cette valeur affecte toutes les polices. Je pense que normalement, la propriété font-size-adjust, telle que définie par W3C , est destinée à prendre la "valeur d'aspect" de la police primaire , qui est défini comme "la hauteur x d'une police divisée par la taille de la police" (ce qui est clairement inférieur à 1). Si vous spécifiez une valeur supérieure à la valeur d'aspect de la police actuelle, la taille de la police va augmenter.

Lorsque la police principale n'est pas disponible, une police de secours est utilisée. Si la "valeur d'aspect" de la police de remplacement diffère de la propriété spécifiée font-size-adjust (valeur d'aspect), la valeur font-size est alors ajustée. Si le font-size-adjust spécifié est la valeur d'aspect de la police principale, la police de secours est alors ajustée pour "ressembler" à la taille de la police principale. police principale. Différentes polices dans le même font-size peuvent avoir différentes tailles, car leur hauteur x diffère, ce qui a une incidence sur la lisibilité. Par exemple, "Verdana" vs "Times New Roman" - Verdana "semble" beaucoup plus gros à la même font-size et par conséquent, est plus lisible à une plus petite font-sizes.

Vous aviez initialement spécifié une valeur de 1.2, ce qui augmentera toujours la taille de la police (quelle que soit la police!). Une valeur de 1.2 indique effectivement que la hauteur de la lettre minuscule x est supérieure de 20% à celle de la lettre majuscule X! Une valeur plus "normale" pour la police que vous avez choisie est 0,54 (mon estimation). Si vous spécifiez une valeur plus grande que cela, la police par défaut sera plus grande dans Firefox.

Utilisation de la formule spécifiée par le W3C :

  c  =  ( a / a' ) s  
Where
  s  =  font-size value
  a  =  aspect value as specified by the 'font-size-adjust' property
  a' =  aspect value of actual font
  c  =  adjusted font-size to use

Si vous spécifiez un font-size-adjust de 1.2, avec une taille de police spécifiée de 18px, la taille de police résultante du texte en question devient: (1.2/0.54) * 18 = 40px (environ). (Ce qui est clairement très grand!)

Si vous aviez spécifié un font-size-adjust de 0,54 (que j'estime comme la valeur d'aspect de votre police principale), la taille de la police résultante serait (0.54/0.54) * 18 = 18. pas de changement.

Outil en ligne pratique pour calculer le font-size-adjust (ou "valeur d'aspect") de toute police installée sur votre ordinateur: http://fontdeck.com/support/fontsizeadjust

5
MrWhite