CSS zur Implementierung von Sprites und Schriftsymbolen

CSS zur Implementierung von Sprites und Schriftsymbolen

Sprites:

In der Vergangenheit war jede Bildressource ein unabhängiges Bild. Wenn der Browser verschiedene Webseiten auf der Website besuchte, rief er diese Bilder wiederholt ab, was bedeutete, dass auf die Ressourcen mehrmals zugegriffen werden musste.

Um die Anzahl der Zugriffe auf Ressourcen zu verringern, werden mehrere häufig verwendete Bilder zu einem Bild kombiniert (der Caching-Mechanismus der Webseite lässt die bereits verfügbaren lokalen Ressourcen weg. Wenn die Ressource beim vorherigen Mal abgerufen wurde, wird erst wieder darauf zugegriffen, wenn die zwischengespeicherte Ressource abläuft. [Es ist ein bisschen wie in einen Vergnügungspark zu gehen. Mit manchen Tickets können Sie alle Spiele spielen, mit manchen Tickets nur ein Spiel. Wenn Sie ein Ticket haben, mit dem Sie alle Spiele spielen können, müssen Sie sich nicht die Mühe machen, immer wieder Tickets zu kaufen]).

Nachdem Sie mehrere häufig verwendete Bilder zu einem Bild kombiniert haben, legen Sie dieses Bild als Hintergrundbild fest und verwenden Sie dann die Hintergrundposition, um verschiedene Teile des Bildes anzuzeigen.

Beispiel:

Unten sehen Sie ein Alphabet mit 26 Buchstaben. Wir verwenden dieses Bild, um ein GOOGLE zu buchstabieren 

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8" />
    <title>Dokument</title>
    <Stil>
        div{
            Anzeige: Inline-Block;
        }
        div:erstes-Kind{
            Breite: 79px;
            Höhe: 79px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -396px 0;
        }
        div:n-tes-Kind(2){
            Breite: 82px;
            Höhe: 82px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -326px -98px;
        }
        div:n-tes-Kind(3){
            Breite: 82px;
            Höhe: 82px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -326px -98px;
        }
        div:n-tes-Kind(4){
            Breite: 79px;
            Höhe: 79px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -396px 0;
        }
        div:n-tes-Kind(5){
            Breite: 48px;
            Höhe: 77px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -81px -101px;
        }
        div:n-tes-Kind(6){
            Breite: 48px;
            Höhe: 77px;
            Hintergrundbild:URL('abcd.jpg');
            Hintergrundposition: -286px 0;
        }

    </Stil>
</Kopf>
<Text>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Ergebnis:

Wie im obigen Beispiel gezeigt, können wir mehrere Bilder zu einem großen Bild zusammenfügen und dann die Hintergrundposition verwenden, um den Inhalt zu extrahieren, den wir sehen möchten.

In Wirklichkeit verwenden viele Hintergrundbilder diese Technik.

Zum Beispiel das JD.com-LOGO:

Einige kleine Symbole von JD.com:

Schriftsymbol:

Wie wir alle wissen, ist die Dateigröße einer Unit-Schriftart kleiner als die Größe eines Bildes. Angesichts der Tatsache, dass Sprites Bilder einzeln verarbeiten, kam jemand auf eine brillante Idee – Bilder in Schriftarten umzuwandeln (tatsächlich wurden Schriftarten ursprünglich so entwickelt).

Nach der Konvertierung in Schriftarten können spezielle Codes verwendet werden, um das angegebene Bild anzuzeigen.

Schriftsymbole haben gegenüber Sprites einen ganz offensichtlichen Vorteil, da es sich um Schriftarten handelt und daher die Schriftfarbe und -größe (ohne Verzerrung) geändert werden kann.

Beispiel: [Im Folgenden wird nur die Verwendung demonstriert, nicht die Erstellung eines Schriftsymbols]

Ich habe mit icomoon eine Reihe von Schriftsymbolen erstellt [icomoon bietet vorgefertigte Symboloptionen] und sie heruntergeladen. Unten sind die Dateinamen.

style.css kann eine Möglichkeit bieten, Schriftsymbole zu verwenden

demo.html kann eine zweite Möglichkeit zur Verwendung von Schriftsymbolen bieten.

Dann verwenden Sie:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8" />
    <title>Dokument</title>
    <Stil>
    /* Gib die Schriftart an. Der folgende Text befindet sich in der CSS-Datei im heruntergeladenen Ordner*/
        @Schriftart {
      Schriftfamilie: „icomoon“;
      Quelle: URL ('fonts/icomoon.eot?ni3k5c');
      Quelle: URL ('fonts/icomoon.eot?ni3k5c#iefix') Format ('embedded-opentype'),
        URL('fonts/icomoon.ttf?ni3k5c') Format('TrueType'),
        url('fonts/icomoon.woff?ni3k5c') format('woff'),
        URL ('Schriftarten/icomoon.svg?ni3k5c#icomoon') Format ('svg');
      Schriftstärke: normal;
      Schriftstil: normal;
        }
        /* verwenden*/
        [Klasse^="Symbol-"], [Klasse*="Symbol-"] {
          /* verwenden Sie !important, um Probleme mit Browsererweiterungen zu vermeiden, die Schriftarten ändern */
          Schriftfamilie: „icomoon“ !wichtig;
          sprechen: keine;
          Schriftstil: normal;
          Schriftstärke: normal;
          Schriftvariante: normal;
          Texttransformation: keine;
          Zeilenhöhe: 1;
          /* Bessere Schriftdarstellung =========== */
          -webkit-font-smoothing: Kantenglättung;
          -moz-osx-font-smoothing: Graustufen;
        }
        .icon-home:vor {
          Inhalt: "\e900";
        }
        .icon-image:vor {
          Inhalt: "\e90d";
        }
        .icon-music:vor {
          Inhalt: "\e911";
        }
        div{
            font-family:'icomoon';/* Muss mit dem oben genannten übereinstimmen*/
        }
    </Stil>
</Kopf>
<Text>
    <div class=".icon-imagee"></div> 
    <!-- Die erste Verwendungsmöglichkeit:
    Importieren Sie die Datei style.css und verwenden Sie die Eigenschaften des Klassenselektors des angegebenen Symbols als entsprechenden Klassenattributwert -->
    <div></div> <!-- Die zweite Verwendungsmöglichkeit:
    Machen Sie eine Schriftartdeklaration für das Tag, öffnen Sie dann demo.html und kopieren Sie das Symbol [ein Code links und ein Symbol rechts].
     -->
     <!-- Die erste Methode besteht darin, ::before zum Hinzufügen zu verwenden. Wir können auch andere ::before-Methoden zum Hinzufügen verwenden-->
</body>
</html>

Zusammenfassen

Oben sehen Sie die vom Editor eingeführte CSS-Implementierung von Sprites und Schriftsymbolen. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion

>>:  mySql SQL-Abfrageoperation für statistische Mengen

Artikel empfehlen

Vue+echarts realisiert Fortschrittsbalken-Histogramm

In diesem Artikel wird der spezifische Code von v...

5 gängige Szenarien und Beispiele für die Destrukturierungszuweisung in JavaScript

Inhaltsverzeichnis Vorwort 1. Daten extrahieren 2...

Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04

Ubuntu 16.04 baut FTP-Server FTP installieren FTP...

Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung

Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...

Mysql löst das N+1-Abfrageproblem der Datenbank

Einführung In Orm-Frameworks wie Hibernate und My...

Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud

Vorwort Wie wir alle wissen, unterstützt das auf ...

Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile

Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...

Lösen Sie das Problem des Docker-Pull-Image-Fehlers

beschreiben: Installieren Sie die VM unter Window...

Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

MySQL ist ein relationales Datenbankverwaltungssy...

Detaillierte Erläuterung der gespeicherten Prozedur „MySql View Trigger“

Sicht: Wenn eine temporäre Tabelle wiederholt ver...

So debuggen Sie das Loader-Plugin in einem Webpack-Projekt

Als ich kürzlich lernte, wie man webpack verwende...

Docker erstellt Schritte zur Implementierung von Kubectl-Images

Wenn der Programmdienst mit k8s bereitgestellt wi...

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...

MySQL-Import- und Export-Sicherungsdetails

Inhaltsverzeichnis 1. Detaillierte Erklärung der ...

Zabbix' PSK-Verschlüsselung kombiniert mit zabbix_get-Wert

Seit Zabbix Version 3.0 wird verschlüsselte Kommu...