Ausführliche Erläuterung der Beispiele für Schriftartenglättung und Anti-Aliasing-Rendering in CSS3

Dieser Artikel stellt hauptsächlich die Schriftartenglättung und das Anti-Aliasing-Rendering in CSS3 vor. Interessierte Freunde können darauf verweisen.

Als ich das offizielle Drupal-Theme durchstöberte, entdeckte ich einen interessanten, nicht standardmäßigen CSS-Selektor -webkit-font-smoothing, also begann ich, damit herumzuspielen. So verwenden Sie CSS3-Schriftarten für eine reibungslose Anzeige

Sie müssen wissen, dass W3C über Anti-Aliasing-Rendering von Schriftarten in CSS nachgedacht hat, z. B. „font-smooth“, aber dies kann an der Darstellung von Schriftarten durch verschiedene Betriebssysteme liegen und Browserkernel Es gibt Unterschiede, und kurz gesagt, es wurde nicht in einen Webstandard aufgenommen. WebKit verfügt jedoch weiterhin über eine Reihe eigener, nicht standardmäßiger Selektoren, um Anti-Aliasing-Effekte zu unterstützen und die Anzeige von Schriftarten flüssiger zu gestalten.

-webkit-font-smoothing hat hauptsächlich die folgenden drei Attribute:

1 keine: kein Anti-Aliasing

2. Subpixel-Antialiasing ist üblich Mac OS und MacType für Windows

3. Antialiasing: Graustufenglättung wird häufig in Mobilgeräten wie Android und iOS verwendet

Nachdem ich es versucht habe, können meine hölzernen Augen den Unterschied nicht erkennen die letzten beiden. Und dieses nicht standardmäßige CSS gilt nur für die meisten mobilen Browser und Desktop-Browser mit WebKit-Kern wie Safari und Chrome. Was die IE-Serie betrifft, Sie unterstützen sie nicht selbst, geben Sie mir die Schuld ~

Schauen wir uns hier zunächst den tatsächlichen Effekt an. Erstens wird kein Anti-Aliasing-Rendering verwendet:

Als nächstes sehen Sie den Effekt nach der Verwendung von -webkit-font-smoothing: subpixel-antialiased Anti-Aliasing-Rendering-Glättung:

Es ist ersichtlich, dass die Glätte der Die Ränder der Schriftart sind immer noch anders und sie sieht nach dem Hinzufügen sehr gut aus.

Nach Tests wurde festgestellt, dass Schriftarten-Anti-Aliasing im Allgemeinen in den integrierten Grundeigenschaften von Browsern enthalten ist. Aber um auf der sicheren Seite zu sein, fügen wir es manuell hinzu~

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Schriftartenglättung und Anti-Aliasing-Rendering in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!