@ font-face: fett in FF ist fetter als in Chrome

Habe ich diese code:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

und wenn ich mit font-weight: bold; bold text in Chrome ist ok, aber im Firefox ist auch viel mutiger.

Wie man dieses Problem lösen?

PS: ich habe die fonts aus lokalen Dateien.

Kommentar zu dem Problem

afaik, jeder der großen Browser verwenden unterschiedliche rendering-engines, die display-Texte in verschiedenen Möglichkeiten... auch die besonderen Formen jedes Zeichen kann unterschiedlich sein, je nachdem, wie viel der TrueType - /OpenType-hinting-Algorithmus implementiert ist. Kommentarautor: Iain Ballard

InformationsquelleAutor der Frage Modest | 2012-01-20

Hier das Problem, dass FF nimmt die Schrift und wendet die bold-font-weight (Also im Grunde, es verdoppelt die Wirkung). Chrome scheint nicht, ändern Sie die schriftart-Gewicht und benutzt nur die richtige Schrift. Ich denke, dies geschieht, weil Sie deklarieren zwei verschiedene font-Familien. Die richtige CSS für diesen Fall wäre:

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Beachten Sie, dass ich verändert die schriftart-Familie "DroidSans", nicht "DroidSansRegular" und "DroidSansBold".

InformationsquelleAutor der Antwort Florian Rachor

31

FireFox veröffentlicht eine Lösung für dieses heute auf Ihre bug-forum. Es war gerade fertig gestellt, die heute so nicht verwenden für eine Weile, aber wir sollten uns alle setzen
```
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
```
in unserem body tag zurücksetzen, um dies für alle Browser. ENDLICH!! Mann, das machte meinen Tag! Dies sollte sich in der nächsten FF Version.

thread hier
https://bugzilla.mozilla.org/show_bug.cgi?id=857142

InformationsquelleAutor der Antwort kristina childs
2

Das Problem ist, dass Firefox versucht, hinzufügen von Fett beeinflussen, um text für benutzerdefinierte Schriftarten, die sind schon Fett. Ich habe gerade die exakt gleiche situation, und löste es, indem Sie font-weight: normal; auf die @font-face-Deklaration.

Beispiel:
```
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
```
Müssen Sie auch verwenden font-weight:normal; auf ein element (z.B. h1, h2, etc), die sonst font-weight:bold; einstellen, sonst wird Firefox immer noch Fett hinzufügen, um die benutzerdefinierte schriftart.

InformationsquelleAutor der Antwort Alex
1

Den Sie angegeben haben, die beiden Flächen in zwei verschiedenen Familien. Sie haben festgelegt, eine regelmäßige Gesicht in einer Familie namens "DroidSansRegular" und Sie definiert haben, eine Fett in einer Familie namens "DroidSansBold". Das design von CSS erwartet, dass Sie definieren diese als zwei GEWICHTE einer Familie. Wenn Sie beide sagen font-family: "DroidSans";, dann können Sie eine schriftart namens "DroidSans" und wenn Sie Sie bitten, für Fett, bekommen Sie das Fett aus dieser Familie.

(Oops. Die gewählte Antwort gab bereits die richtige Lösung, aber nicht ganz erklären, was falsch war.)

InformationsquelleAutor der Antwort hsivonen
0

Mein problem war, dass der text, "mehr Fett" wurde innerhalb eines h1-Tags. Ich habe gerade das folgende auf mein CSS und das problem behoben! 🙂
```
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
```
InformationsquelleAutor der Antwort Harry
0

Verwendete ich Alex ' s Lösung:
```
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
```
Was immer noch nicht funktioniert, in Firefox v24... Heute auf 2013. Oktober 28. der bold @font-face problem ist immer noch vorhanden.

Nach ein wenig suchen fand ich diese Lösung hier:
https://support.mozilla.org/hu/questions/801491

Was hat funktioniert, zumindest bis Mozilla behebt dieses Problem in einem update (2011.03.27...), war ausschalten Hardware-Beschleunigung. Gehen Sie zu Extras->Optionen | Erweitert | Registerkarte allgemein | Häkchen bei "Hardwarebeschleunigung Verwenden, wenn verfügbar".
Ich bin sicher, dies trifft Leistung in irgendeiner Weise, aber so weit es funktioniert gut.

Was traurig ist, dass Sie wirklich nicht tun können alles über die "Fette" Schriftarten im Firefox... Sie wirklich keine option, diese zu deaktivieren, die auf Nutzer-Maschinen. Hardware-Beschleunigung ist wirklich wichtig. Ich denke, Sie müssen nur mit ihm zu Leben. Sie hat nicht wurde dieser in den letzten 3-4 Jahren. Probaby Sie nicht dieses Problem beheben in der Zukunft.

Jedoch, bemerkte ich, dass vielleicht dieses Problem nicht auf die externen javascript-Schriften (zum Beispiel: Adobe Typekit, EdgeFonts).

Hoffe, dass Chrome findet seinen Weg auf mehr und mehr PC-Benutzers...

UPDATE:

Ist es nur möglich, zu deaktivieren, Teile der hardware-Beschleunigung. Tutorial hier: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

Erwähnte auch eine andere Lösung: deaktivieren der Option " anisotrope Filterung für Firefox in Ihre Grafik-Karte Einstellungen-Seite (aber das ist nicht für mich funktioniert).

InformationsquelleAutor der Antwort Lanti
-1

In der Regel JavaScript-basierte Schriftarten Rendern besser, obwohl alles anders Aussehen in verschiedenen Browsern, da die rendering-engines. Sie werden auch bemerken einen Unterschied zwischen den Windows und Mac mit dem gleichen browser.

Typekit neigt zu meinen Lieblings-Wahl. Google fonts tun ziemlich gut. Ich denke, DroidSans ist eine option bei Google oder Typekit.

InformationsquelleAutor der Antwort sethasaurus
-2

Kurz gesagt, es ist wirklich nicht eine Möglichkeit, dies zu lösen aufgrund der geringfügigen Unterschiede in der rendering-engines und internen Einstellungen, die von jedem browser. (wie @LainBallard angedeutet).

Wenn Sie wirklich brauchen, um haben pixel-Perfektion, Ihre einzige wirkliche Hoffnung ist, Bilder zu verwenden, aber ich würde versuchen, optimieren Sie Ihr design, so dass Sie nicht brauchen, die Pixel exakt übereinstimmen.

InformationsquelleAutor der Antwort cdeszaq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.