it-swarm.com.de

Problemumgehung für Firefox 22+ mit großen Schriftarten

Ich arbeite an einer Website und Firefox zeigt die Schrift sehr groß an. Chrome und Safari zeigen die normale Schriftgröße an. Chrome verwendet die WebKit-Rendering-Engine. Firefox verwendet die Gecko-Engine. Ich habe festgestellt, dass Sie die Schriftanzeige in Firefox durch Eingabe ändern können

about:config

in der Firefox-Adressleiste und Ändern der

 layout.css.devPixelsPerPx

wert auf 1. Obwohl dies auf einigen Systemen funktioniert, möchte ich nicht, dass mein Benutzer dies tun muss.

Wie kann ich sicherstellen, dass die Schriftart korrekt angezeigt wird? Ich habe versucht, CSS mit anzupassen

-moz-font-size

und Varianten, aber es funktioniert nicht. Ich kann wirklich nicht alle meine Texte in Bilder ändern, das ist einfach falsch. Gibt es dafür eine bestimmte Syntax? Oder eine vorgeschlagene Problemumgehung, die optimal wäre?

ChromeChrome image

Feuerfuchsenter image description here

5
RobSeg

Wie in den Kommentaren angegeben, werden die übergroßen Schriftarten in Firefox anscheinend von der Eigenschaft font-size-adjust verursacht (die übrigens derzeit nur von Firefox AFAIK unterstützt wird). Durch Entfernen dieser Eigenschaft insgesamt (oder Festlegen eines geeigneten Werts - siehe unten) wird das Problem in Firefox behoben.

Die Idee hinter font-size-adjust ist, Fallback-Schriften besser lesbar zu machen. wenn sich ihre x-Höhen von der Primärschriftart unterscheiden. Dieser Wert wirkt sich jedoch auf alle Schriftarten aus. Ich denke, dass normalerweise die font-size-adjust -Eigenschaft, wie definiert von W3C , den "Aspektwert" der Primärschriftart , definiert als "die x-Höhe einer Schrift geteilt durch die Schriftgröße" (was eindeutig viel weniger als 1 sein wird). Wenn Sie einen größeren Wert als den Seitenwert der aktuellen Schriftart angeben, wird die Schriftgröße erhöht.

Wenn die Primärschrift nicht verfügbar ist, wird eine Ersatzschrift verwendet. Wenn der "Aspektwert" der Ersatzschrift von der angegebenen Eigenschaft font-size-adjust (Aspektwert) abweicht, wird font-size angepasst. Wenn der angegebene font-size-adjust der Aspektwert der Primärschriftart ist, wird die Ersatzschriftart so angepasst, dass sie eine ähnliche Größe wie die "sieht" Primärschrift. Unterschiedliche Schriftarten zur gleichen font-size können unterschiedlich groß aussehen, da sich ihre x-Höhen unterscheiden und dies die Lesbarkeit beeinträchtigt. Zum Beispiel "Verdana" vs "Times New Roman" - Verdana "sieht bei demselben font-size viel größer aus und ist folglich bei kleineren font-size besser lesbar.

Sie haben anfangs einen Wert von 1,2 angegeben, wodurch sich die Schriftgröße (bei jeder Schriftart!) Immer erhöht. Ein Wert von 1,2 besagt effektiv, dass die Höhe des Kleinbuchstabens x 20% größer ist als der des Großbuchstabens X! Ein "normalerer" Wert für die ausgewählte Schriftart ist 0,54 (meine Schätzung). Wenn Sie einen größeren Wert angeben, ist die Standardschrift in Firefox größer.

Mit die von W3C angegebene Formel :

  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

Wenn Sie einen font-size-adjust von 1.2 mit einer angegebenen Schriftgröße von 18px angeben, wird die resultierende Schriftgröße des betreffenden Texts zu: (1.2/0.54) * 18 = 40px (ungefähr). (Das ist eindeutig sehr groß!)

Wenn Sie einen font-size-adjust von 0,54 (den ich als Aspektwert Ihrer primären Schriftart einschätze) angegeben hätten, wäre die resultierende Schriftgröße (0,54/0,54) * 18 = 18. dh. Keine Änderung.


Praktisches Online-Tool zur Berechnung des font-size-adjust (auch als "Aspektwert" bezeichnet) einer auf Ihrem Computer installierten Schriftart: http://fontdeck.com/support/fontsizeadjust

5
MrWhite