fontfaceonload
Version 0.1.7
web-font-loading-recipes .
Verwenden Sie bei einer vorhandenen @font-face -Deklaration.
@font-face {
font-family : My Custom Font Family;
/* src and other properties as normal */
}Fügen Sie die Bibliothek ein. Rufen Sie das JavaScript an.
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) { } ,
error : function ( ) { } ,
timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ; Verwenden FontFaceOnload @font-face SO:
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-family" ;
}
} ) ;Und dann verwenden Sie die Klasse, um die Verwendung der benutzerdefinierten Schriftart zu fördern:
body {
font-family : sans-serif;
}
. my-custom-font-family body {
font-family : My Custom Font Family , sans-serif;
} Ein alternativer Ansatz, der auch den FOIT beseitigt und nicht erforderlich ist, dass Sie Ihr CSS ändern, besteht darin, die loadCSS -Bibliothek zu verwenden, um den @font-face mit einem Daten-URI-Quellblock dynamisch zu laden. loadCSS ist kleiner als fontfaceonload . Zu den Einschränkungen dieses Ansatzes gehört, dass Sie das Lasten des Formats verwalten müssen (WOFF, WOFF2, TTF), und es funktioniert nicht so gut mit Symbolschriften (da Sie eine CSS -Klasse benötigen, um andere Geschwisterelemente wie der deskriptive Text zu stylen).
Um die Fallback -Schriftart zu verbergen, so dass seltsame Fallback -Zeichen nicht sichtbar sind, während die Symbol -Schriftart das Laden ist, verwenden Sie Fontfaceonload mit der Option glyphs wie SO:
FontFaceOnload ( "My Custom Font Icon" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-icon" ;
} ,
glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;Und dann verwenden Sie die Klasse, um die Verwendung der benutzerdefinierten Schriftart zu fördern:
. icon {
display : none;
}
. my-custom-font-family . icon {
display : inline-block;
font-family : My Custom Font Icon , sans-serif;
}Dadurch wird das CSS -Schriftart -Lademodul verwendet, wenn verfügbar (derzeit in Chrome 35+ und Opera 22+). Wenn dies nicht verfügbar ist, verwendet es einen sehr ähnlichen Ansatz wie im Typkit Web Font Loader (der derzeit 7,1 KB GZIP) verwendet wird.
Grundsätzlich erstellt es ein Element mit einem Schriftstapel mit der Webschrift und einer Standard-Serifen-/Sans-Serif-Schrift. Anschließend wird eine Testzeichenfolge verwendet und die Abmessungen des Elements in einem bestimmten Intervall misst. Wenn sich die Dimensionen von den Standard -Fallback -Schriftarten unterscheiden, wird angenommen, dass die Schriftart erfolgreich geladen wurde.
Wenn Sie eine vollständige Polyfüllung für das CSS -Schriftart -Lademodul wünschen, folgen Sie mit Bram Steins Schriftlader. Ich glaube, die Spezifikation hat sich geändert, seit er diese Polyfill gestartet hat, aber er arbeitet an einer aktualisierten Version.
Führen Sie diese Befehle aus:
npm installbower installgrunt initgrunt wie normal. Anstelle einer riesigen Gruntfile.js verwendet dieses Projekt ein modulares Grunzen -Setup. Jede einzelne Optionsschlüssel für die Grunzkonfiguration verfügt über eine eigene Datei in grunt/config-lib/ (readonly upgeleitete Konfigurationen, diese nicht direkt ändern) oder grunt/config/ (projektspezifische Konfigurationen). Sie können den gleichen Schlüssel in beiden Verzeichnissen verwenden, die Objekte werden mit LO-DASH-Zusammenführungen intelligent kombiniert.
Für die Verkettung im vorherigen Gruntfile -Setup würden Sie dem riesigen Objekt, der in grunt.initConfig übergeben wurde, wie folgt hinzufügen: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . In der neuen Konfiguration erstellen Sie mit module.exports = { /* YOUR CONFIG */ }; einen grunt/config/concat.js ; .
MIT -Lizenz
