Firefox Font-Face-Rendering sieht sehr anders aus als z. Chrome

Ich habe Probleme mit @font-face in CSS. Die Schriftart, die ich verwende, sieht in jedem Browser sehr unterschiedlich aus.Firefox Font-Face-Rendering sieht sehr anders aus als z. Chrome

Sehen Sie dieses Beispiel in Firefox:

Firefox

Und hier in Chrome:

Chrome

Ich weiß nicht, was dieses Problem verursacht. Ich habe bereits versucht, text-rendering zu verwenden, und ich versuchte auch, die Reihenfolge der url -Eigenschaften in der @font-face Deklaration zu ändern.

Ich verwende Windows 7 Professional und Firefox V30.

Kann mich jemand über den Grund für dieses Problem informieren und mir sagen, wie ich es beheben könnte?

Vielen Dank.

// EDIT: Diese ist die @font-face Erklärung ich verwende:

@font-face { 
    font-family: 'MyFont'; 
    src: url('myFont.eot'); 
    src: url('myFont.eot?#iefix') format('embedded-opentype'), 
     url('myFont.svg#myfont') format('svg'), 
     url('myFont.woff') format('woff'), 
     url('myFont.ttf') format('truetype'); 
    font-style: normal; 
    font-weight : normal; 
}

Wie ich oben geschrieben habe ich schon mit der Reihenfolge dieser Befehle gespielt.

In meinem speziellen Problem können Sie sehen this page (footer) zeigt das Problem.

Quelle

2014-10-15 dude

zeigen Sie die Schrift-Gesicht-Code, den Sie verwenden – dippas

siehe aktualisierten Beitrag – dude

werfen Sie einen Blick auf diese: http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac/9041280 # 9041280 – dippas

Dies scheint ein Zeichensatzproblem zu sein, da alle Möglichkeiten, die für andere arbeiten, das Problem nicht beeinträchtigen. Das Umschalten auf eine andere Schriftart ist die einzige Lösung in diesem Moment.

Quelle

2014-10-26 15:55:22 dude

Die meisten modernen Browser verwenden DirectWrite unter Windows zum Rendern von Text, mit Ausnahme von Chrome. Zum Glück implementieren sie es jetzt und es wurde kürzlich als Standard in den neuesten Chrome-Builds festgelegt. Das sind die guten Nachrichten, die schlechte Nachricht ist, dass es immer noch Bugs hat und Schriften nicht immer richtig rendert. Sie können sehen, ob dies ein Problem ist, indem Sie es deaktivieren, um zu sehen, ob das das Problem behebt.

Um DirectWrite zu deaktivieren, geben Sie chrome://flags/ in die Adressleiste ein und finden Sie die Option "DirectWrite deaktivieren". Wenn das Problem dadurch behoben wird, sollten Sie einen Fehler mit den Beispielen Ihres Text-Renderings protokollieren, damit dieser behoben werden kann.

Weitere Informationen dazu finden Sie im Chrome-Blog unter http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.

Quelle

2014-10-20 06:51:12 Bill

Vielen Dank für Ihre Antwort. Ich suche einen Weg, dieses Problem zu beheben, so dass es in jedem Browser nicht so unterschiedlich aussieht, sondern webbasiert. Eine Änderung in den Browsereinstellungen oder auf der Grafikkarte wäre also keine Lösung für mich, tut mir leid. Aber es ist immer noch interessant! – dude

Wenn Sie DirectWrite deaktivieren und das Problem mit der Schriftart beheben, bedeutet das leider, dass das Problem nicht in Ihrem Website-Code behoben werden kann. Es gibt keine Zauberei 'machen meine Schriftart in allen Browsern css oder html gleich aussehen. – Bill

Siehe meinen aktualisierten Beitrag. Der Link zeigt das Schriftproblem in der Fußzeile an. Wie ich oben schrieb, suche ich eine Lösung für Firefox. Kennen Sie einen Weg, um Firefox zu reparieren? – dude

hatte ich das gleiche Problem und fixierte es mit der

color:#505563; 
font-family: 'Dosis', sans-serif; 
text-shadow: 0px 1px 2px #eeeeee;

Mit anderen Worten kleinen Sache folgen Sie einfach Text Schatten hinzufügen und es wird gut funktionieren, mit den richtigen Farben als Künstler spielen. Versuchen Sie diese

text-shadow: 0px 0px 1px #eeeeee;

Quelle

2014-10-25 05:35:52

Auch die Fonts, die ich verwende, habe ich auf meinem eigenen Hosting gespeichert, denn wenn Sie sie von Google abrufen, wird es nicht immer korrekt geladen, auch schneller –

Vielleicht hat dies das Problem mit Ihrer Schriftart, aber nicht mit der Schriftart auf der Demo-Seite gelöst. Ich habe es getestet, wie Sie gesagt haben, aber das hat das Problem nicht beeinflusst. Vielleicht ist 'Dosis' eine winzige Schrift, und der Textschatten macht die Schrift in Ihrem Beispiel stabil. – dude

Browser verfügen über Eingabehilfen, die CSS überschreiben. Stellen Sie sicher, dass die Text- oder Seiteneinstellungen nicht zoomen. Siehe https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

Wenn nichts anderes wird mindestens eine Variable ausschließen, Debugging effektiver zu machen.

Quelle

2014-10-25 19:50:47 Ken

Sie könnten es selbst testen. Ich habe auf der Demoseite keinen Zoom aktiviert, aber der Effekt wird weiterhin angezeigt. – dude

Firefox Font-Face-Rendering sieht sehr anders aus als z. Chrome

Antwort

Verwandte Themen