Wie reduziert man die Schriftstärke in Firefox auf Mac mit CSS?

Question

Hier ist mein Problem: Ich habe font-face für das Menü meiner Website verwendet, aber Firefox auf Mac zeigt es zu fett an. Auf einem PC funktioniert alles gut, die Schrift ist perfekt dimensioniert und sieht aus wie sie sollte.

Leider musste ich auf dem Mac ein CSS-Hack für Safari hinzufügen (der funktioniert), aber ich habe nichts Ähnliches in Firefox gefunden.

Ich habe den "text-shadow-Hack" ausprobiert, ich habe versucht, die font-weight-Eigenschaft zu verwenden (die so gut wie nichts bewirkt).

Und jetzt etwas Code!

@font-face {
    font-family: 'KnockoutHTF48FeatherweightRg';
    src: url('font/knockout-htf48-featherweight-webfont.eot');
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
         url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
         url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
    font-weight: normal;
    font-style: normal;

}

Für Safari:

body{
    ...
    -webkit-font-smoothing: antialiased;
}

Links ist FF auf Mac und rechts ist FF auf PC (die gute Version)

Danke!

Answer 1

Ich habe festgestellt, dass es am besten ist, eine etwas "leichtere" Version der Symbole zu erstellen, um dies auszugleichen. Sie sind akzeptabel in Firefox und in allen anderen Browsern nur minimal heller. In Illustrator erstelle ich ein 16px-Symbol. Ich ändere die Größe auf 1024px und wende einen Versatzpfad von -6px an (diese Zahlen haben sich für mich am besten bewährt). Anschließend exportiere ich dieses als svg und importiere es in IcoMoon, um die Icon-Schriftart zu erstellen. Ich verwende nicht -webkit-font-smoothing: antialiased (oder das ausstehende -moz-osx-font-smoothing: grayscale), es sei denn, es handelt sich um ein helles Symbol auf dunklem Hintergrund. Dies ist der beste Weg, den ich gefunden habe, um zu erreichen, dass Icon-Schriftarten (weitgehend) einheitlich auf verschiedenen Browsern und Plattformen angezeigt werden.

Answer 2

Auf CSS-Tricks gefunden und das funktioniert wirklich.

Dies dem Stylesheet hinzufügen: -moz-osx-font-smoothing: grayscale;