Wie erreicht man in CSS3 einen Anti-Aliasing-Rendering-Effekt für Schriftarten? -webkit-font-smoothing-Eigenschaft (Beispiel)-CSS-Tutorial-php.cn

Wie erreicht man in CSS3 einen Anti-Aliasing-Rendering-Effekt für Schriftarten? -webkit-font-smoothing-Eigenschaft (Beispiel)

青灯夜游

Freigeben： 2018-09-13 15:19:39

Original

2115 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie in CSS3 einen Anti-Aliasing-Rendering-Effekt für Schriftarten erzielen können. -webkit-font-smoothing-Attribut (Beispiel) , hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.

Durch Anti-Aliasing-Rendering von Schriftarten können die Schriftarten klarer und komfortabler aussehen. Heutzutage, da Icon-Schriftarten im Trend liegen, wird zunehmend Anti-Aliasing-Rendering verwendet.

Schriftglättung ist eine nicht standardmäßige CSS-Definition. Es war im Entwurf der Standardspezifikation enthalten, wurde aber später aus irgendeinem Grund aus dem Webstandard entfernt.

Wir können jedoch die folgenden zwei Definitionen für Anti-Aliasing-Rendering verwenden:

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/

Nach dem Login kopieren

1. Webkit unterstützt diesen Effekt in seiner eigenen Engine.

-webkit-font-smoothing Es hat drei Attributwerte:

1) keine: besser für Text mit niedrigen Pixeln

2) Subpixel - antialiased: Standardwert

3) antialiased: Antialiasing ist sehr gut

Beispiel:

body{
   -webkit-font-smoothing: antialiased;
}

Nach dem Login kopieren

Dieses Attribut kann die Schriftart auf der Seite nach der Verwendung antialiasen Dadurch sieht die Schriftart klarer aus. Nach dem Hinzufügen fühlte sich die Seite plötzlich kleiner und klarer an.

2. Gecko hat auch eine eigene, nicht standardmäßige Definition des Anti-Aliasing-Effekts eingeführt.

-moz-osx-font-smoothing: inherit |. Dieses Attribut hat auch eine klarere Wirkung.

Beispiel:

.icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Nach dem Login kopieren

3. Das Ionic-Framework fügt eine zusätzliche Schriftartenglättung hinzu: Antialiasing;

dies in der Stil Warten Sie darauf, dass die Standardisierung der Schriftglättung vorbereitet wird?

Das obige ist der detaillierte Inhalt vonWie erreicht man in CSS3 einen Anti-Aliasing-Rendering-Effekt für Schriftarten? -webkit-font-smoothing-Eigenschaft (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!