Heim  >  Artikel  >  Web-Frontend  >  Schriftglättung und Anti-Aliasing-Rendering in CSS3

Schriftglättung und Anti-Aliasing-Rendering in CSS3

高洛峰
高洛峰Original
2017-02-22 13:12:041639Durchsuche

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. Schriftglättung und Anti-Aliasing-Rendering in CSS3Und 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~Schriftglättung und Anti-Aliasing-Rendering in CSS3

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

CSS3中字体平滑处理和抗锯齿渲染

Als nächstes folgt der Effekt nach dem Glätten mit -webkit-font-smoothing: subpixel-antialiased Anti-Aliasing-Rendering:

CSS3中字体平滑处理和抗锯齿渲染

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn