Schriftglättung und Anti-Aliasing-Rendering in CSS3

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:

• keine: Kein Anti-Aliasing

• Subpixel-Antialiasing ( Standard: Subpixel-Glättung wird häufig in Mac OS und MacType für Windows verwendet

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

Aber nachdem ich es versucht habe, können meine Holzaugen überhaupt keinen Unterschied zwischen den beiden letzteren erkennen. 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 folgt der Effekt nach dem Glätten mit -webkit-font-smoothing: subpixel-antialiased Anti-Aliasing-Rendering:

Es ist ersichtlich, dass die Die Glätte der Schriftränder ist immer noch unterschiedlich und sieht danach viel besser 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

Weitere verwandte Artikel zum Thema Schriftartenglättung und Anti-Aliasing-Rendering in CSS3 finden Sie auf der chinesischen PHP-Website!