Verwenden Sie Fontello, um nur Symbolschriften zu laden, die Sie benötigen

fontello: Erstellen Sie leichte benutzerdefinierte Symbolschriften

fontello ist ein kostenloser, benutzerfreundlicher Service für das Erstellen von benutzerdefinierten Symbolschriften aus Vektorbildern. Es wird die Webentwicklung optimiert, indem Icons aus verschiedenen Open-Source-Projekten (wie Schriftart Awesome, Entypo und Typicons) in eine einzelne kompakte Datei konsolidiert werden. Dies reduziert die Seitenladezeiten erheblich und verbessert die Gesamtleistung der Website.

Symbolschriften bieten mehrere Vorteile gegenüber Standardbildern: Sie sind auf hochauflösenden Bildschirmen knackig, leicht mit CSS (Größe, Farbe, Schatten) und einfacher zu verwalten als Bildsprites. Für neue Projekte sind SVG-Bilder jedoch möglicherweise eine überlegene Alternative, die mehrfarbige Funktionen und schärfere Grafiken bietet. Wenn der Legacy -Browser -Unterstützung oder Workflow -Einschränkungen Symbolschriften erfordern, ist die Optimierung der Verwendung von entscheidender Bedeutung.

Die Herausforderung mit beliebten Symbol -Schriftartbibliotheken wie Font Awesome (Version 4.7, ~ 75 KB) besteht darin, dass die meisten Projekte nur einen Bruchteil der verfügbaren Symbole verwenden. Das Laden der gesamten Bibliothek erhöht das Seitengewicht unnötig. Fontello löst dies, indem Sie nur die benötigten Symbole auswählen können.

Erstellen einer benutzerdefinierten Schrift

1. Symbolauswahl: Wählen Sie Ihre erforderlichen Symbole auf der Fontello -Homepage.
2. Anpassung: Auf der Registerkarte "Namen anpassen" können Sie Symbole umbenennen (z. B. ändern Sie icon-facebook in icon-fb). Die Schaltfläche Einstellungen ermöglicht eine Präfix -Änderung (z. B. Ändern des Standards icon- Präfix). Sie können auch einzelne Symbolcodes einstellen.
3. Download: Laden Sie die generierten Schriftdateien herunter.

Integration der Schrift

1. extrahieren: extrahieren Sie die heruntergeladene Zip -Datei. Sie finden "CSS", "Schriftarten" und eine "config.json" -Datei (mit der Schriftkonfiguration).
2. import (optional): Für vorhandene Projekte ziehen Sie die Datei "config.json" auf die Fontello -Seite oder importieren Sie sie über Einstellungen & GT; Import.
3. Dateiplatzierung: Kopieren Sie alle Dateien (Verwalten der Ordnerstruktur) in Ihr Projektverzeichnis.
4. CSS Einschluss: In Ihrem Projekt die generierte CSS -Datei (z. B. social-media.css) einbeziehen.
5. Verwendung: Verwenden Sie Symbole in Ihrem HTML -Markup durch das Format <i class="icon-classname"></i> und ersetzen Sie icon-classname durch den Namen des Symbols.

Verwenden Sie benutzerdefinierte Bilder

Während Fontello eine riesige Bibliothek anbietet, können Sie benutzerdefinierte SVG -Bilder importieren. Stellen Sie sicher, dass Ihre SVGs ordnungsgemäß vorbereitet sind: Entfernen Sie Füllungen, Farben, komplexe Regeln (wie evenodd Füllungen) und Fettlinienattribute; Verbinden Sie Konturen in einzelne Umrisse.

Leistungszuwächse

fontello reduziert die Dateigröße drastisch. In einem Beispiel wurde eine fantastische 4.7 -Datei (75 KB) auf eine 4 -KB -Fontello -Datei (unter Verwendung von acht Symbolen) reduziert. Die Einsparungen variieren je nach Anzahl der verwendeten Symbole. Dies minimiert HTTP -Anforderungen und verbessert die Ladegeschwindigkeit. Darüber hinaus ermöglicht Fontello ein konsistentes Symbolpräfix über mehrere Schriftarten hinweg, um die Verwaltung zu vereinfachen.

Erweiterte Konfiguration

• cors Header: Wenn Sie Schriftdateien auf einer separaten Domäne hühen, konfigurieren Sie CORS -Header in Ihrer .htaccess -Datei:

<filesmatch "\.(ttf|otf|woff|woff2|eot)$">
  Header set Access-Control-Allow-Origin "*"
</filesmatch>

• Schriftart MIME -Typen: Richtige Mime -Typen in Ihrem .htaccess:
festlegen

AddType application/x-font-ttf           ttc ttf
AddType application/x-font-otf           otf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/vnd.ms-fontobject    eot

Schlussfolgerung

fontello vereinfacht das Erstellen leichter, angepasster Symbolschriften. Selbst scheinbar kleine Dateigrößenreduzierungen akkumulieren sich erheblich, um die Website der Website zu verbessern. Betrachten Sie die Verwendung, um Ihren Symbol -Schriftart -Workflow zu optimieren.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Fontello, um nur Symbolschriften zu laden, die Sie benötigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!