Problem mit schlechtem Font-Rendering mit CSS3-Übergängen, jQuery und Google Fonts

8

In Firefox gibt es kein Problem. Hier ist ein Bild:

Ссылка

In Safari wird der Text schlecht dargestellt:

Ссылка

In IE7 & amp; IE8, es ist viel schlimmer, aber ich habe kein Bild. Entschuldigung :(

Ich benutze das Isotope jQuery Plugin und die CSS3-Übergänge scheinen das schlechte Font-Rendering zu verursachen.

Ich verwende auch Google Font API.

Hier sind die CSS-Übergänge für Isotope geschrieben als:

%Vor%

Ich schätze jede Hilfe mit diesem. Sieht gut aus in Firefox!

Danke!

    
Justin 27.02.2011, 23:05
quelle

2 Antworten

4

Wenn Sie den IE für eine Minute vergessen haben, können Sie die Eigenschaft -webkit-font-smoothing der Stildefinition .isotope-item hinzufügen. So:

%Vor%

Der Grund scheint etwas mit unterstützenden 3D-Übergängen zu tun zu haben. Isotope erkennt mithilfe von Modernizr automatisch die Unterstützung für 3D-Übergänge und verwendet "translate3d" anstelle von "translate". Was ich wirklich will, ist:

%Vor%

Aber das scheint nur in Chrome zu funktionieren und bringt Safari zurück, wie es vorher aussah. Um es klar zu stellen: Chrome weist kein Anti-Aliasing-Problem auf, berücksichtigt jedoch die obigen Stildefinitionen.

Ich überlege, die Isotopquelle so zu ändern, dass sie diese Schriftartglättungsdefinition nur Browsern hinzufügt, die 3D-Transformationen (z. B. Safari) unterstützen, und Chrome allein lässt.

    
Thom Mahoney 25.03.2011 01:02
quelle
0

Leider gibt es nicht wirklich alles, was Sie tun können. Es hat mit den Alpha-Filtern zu tun, die IE verwendet, um Deckkraft zu erzeugen, und ich habe noch nie eine Lösung dafür gefunden.

    
kayluhb 27.02.2011 23:22
quelle