Google Webfonts sind gerendert in Firefox, Chrome und Opera
Ich habe ein problem mit Google webfonts.
Ich bin mit Google Webfont genannt 'Bitter'.
Aber in Firefox und Chrome es wird dargestellt, unterschiedlich. Chrome und Opera scheinen zu machen, es in ähnlicher Weise. Es ist nicht drastisch anders, aber es ist, vermasselt die Formatierung und die Kompositionen der Absätze.
Hier ist der CSS:
.small-col h3{
color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;
}
Und hier ist ein screenshot von der Ausgabe spreche ich über:
http://i49.tinypic.com/2u46mpi.png
Könnte jemand empfehlen, wie kann ich konsistente Darstellung in Firefox, Chrome und Opera?
Dank
- Aufgegeben zu versuchen, um Schriften zu Verhalten, die in eine konsistente cross-browser Weg, vor langer Zeit, und Sie nutzen verschiedene rendering-engines, Sie tun es anders.
- Chrome font-rendering ist Müll, immer war, immer sein wird. Es ist wirklich nicht alles, was Sie über es tun können anderes als finden eine schriftart, die Sie Leben können in allen Browsern. Ich könnte mir vorstellen, Safari genauso aussieht wie die zweite 2 als gut, da es das webkit zu.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Schriften sind nie zu Rendern das gleiche in allen Browsern. Sie nutzen verschiedene rendering-engines—zu versuchen, um websites zu suchen, die identisch auf jedem browser ist eine verlorene Sache.
Für Ihre speziellen problem zu beheben, verwenden Sie einen non-breaking-space-Kontakt zu verhindern und uns davor getrennt.
Sieht es aus wie firefox rendert das Gewicht ein wenig anders, und der Abstand ein wenig anders zu. Vielleicht versuchen Sie definieren die numerisch, als auch, um zu überschreiben, alle browser-defaults. Leider verschiedenen Browsern und insbesondere Betriebssystemen wie zum Rendern fonts unterschiedlich und durch Ihre eigenen Regeln manchmal.
letter-spacing: 0
speziell.Kann es Unterschiede in der Darstellung der Schriften zwischen den Browsern, wenn auch oft, gibt es Unterschiede zwischen den Plattformen.
Hier wird jedoch der Unterschied scheint zu sein, verursacht durch den Buchstabenabstand. Mehr genau, Firefox korrekt gilt es, WebKit-Browsern nicht. Für
16px
Schriftgröße-0.06em
Ergebnis sollte in etwas über einem pixel, und wenn Sie den inspection mode (F12, berechnet-Stil), werden Sie sehen, dass Firefox gilt-1px
in der Erwägung, dass Chrome verwendetnormal
(d.h., null), für dieletter-spacing
. Chrome scheint eine Schwelle auf der spacing-Wert, so dass es nur-0.065em
ändert die Dinge.Also vor allem, wenn Sie lieber die Chrom-rendering, nur das auslassen der
letter-spacing
. Es ist in der Regel am besten zu vermeiden, "Zeichenabstand" – die Schrift-designer sollte wissen es besser, und wenn Sie mit Ihr einverstanden oder seine Entscheidungen, verwenden Sie eine andere schriftart, anstatt zu versuchen, zu "reparieren" die schriftart.Einer der Unterschiede zwischen den Browsern ist, dass Firefox gilt kerning standardmäßig, andere Browser nicht. Aber das ist nicht relevant für die spezifischen Texte in dem Beispiel, da die kerning-Tabelle für Bitter hat paar Großbuchstaben nur (so "VA" würde anders Aussehen, zum Beispiel).
letter-spacing: -1px
, dann Chrom scheint es in Ehren zu halten. Dies ist ungerade. Und es macht die Polsterung fixiert, so ist es nicht angepasst, wenn z.B. die Benutzer zwingt, eine andere Schriftgröße. Aber warum würden Sie den Zeichenabstand an alle, wenn Sie lieber die aktuelle Chrome-rendering, was fehlt es?Ich hatte das gleiche problem mit den Serifen-schriftart. Wenn Sie schreiben
"serif"
stattserif
(ohne ""), Chrome macht das gleiche wie Firefox.Versuchen Sie, die google-webfonts-code im head der website mit den bereitgestellten javascript-code, anstelle von css oder mit @import.
Dies löste mein problem auf dieses Thema.