fontfaceonload
Version 0.1.7
web-font-loading-recipes untuk contoh.
Gunakan dengan deklarasi @font-face yang ada.
@font-face {
font-family : My Custom Font Family;
/* src and other properties as normal */
}Sertakan perpustakaan. Hubungi JavaScript.
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) { } ,
error : function ( ) { } ,
timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ; Untuk memungkinkan font fallback terlihat saat @font-face memuat, cukup gunakan FontFaceOnload seperti:
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-family" ;
}
} ) ;Dan kemudian gunakan kelas untuk ruang lingkup penggunaan font khusus Anda:
body {
font-family : sans-serif;
}
. my-custom-font-family body {
font-family : My Custom Font Family , sans-serif;
} Pendekatan alternatif yang juga akan menghilangkan FOIT serta tidak mengharuskan Anda untuk mengubah CSS Anda adalah dengan menggunakan pustaka loadCSS untuk memuat @font-face dengan blok sumber data URI secara dinamis. loadCSS lebih kecil dari fontfaceonload . Keterbatasan pendekatan ini termasuk yang mengharuskan Anda untuk mengelola format mana yang akan dimuat (Woff, Woff2, TTF) dan itu tidak akan bekerja dengan baik dengan font ikon (karena Anda perlu kelas CSS untuk menata elemen saudara kandung lainnya, seperti teks deskriptif).
Untuk menyembunyikan font fallback sehingga karakter fallback yang aneh tidak terlihat saat font ikon dimuat, gunakan fontfaceonload dengan opsi glyphs seperti 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.
} ) ;Dan kemudian gunakan kelas untuk ruang lingkup penggunaan font khusus Anda:
. icon {
display : none;
}
. my-custom-font-family . icon {
display : inline-block;
font-family : My Custom Font Icon , sans-serif;
}Ini menggunakan modul pemuatan font CSS bila tersedia (saat ini di Chrome 35+ dan Opera 22+). Ketika itu tidak tersedia, ia menggunakan pendekatan yang sangat mirip dengan yang digunakan dalam loader font web Typekit (yang saat ini 7.1kB GZIP).
Pada dasarnya, ini menciptakan elemen dengan tumpukan font termasuk font web dan jenis huruf serif/sans-serif default. Kemudian menggunakan string uji dan mengukur dimensi elemen pada interval tertentu. Ketika dimensi berbeda dari font fallback default, font dianggap telah dimuat dengan sukses.
Jika Anda ingin polyfill penuh untuk modul pemuatan font CSS, ikuti bersama dengan font loader Bram Stein. Saya percaya spesifikasi telah berubah sejak dia meluncurkan Polyfill ini, tetapi dia sedang mengerjakan versi yang diperbarui.
Jalankan perintah ini:
npm installbower installgrunt initgrunt seperti biasa. Daripada satu raksasa Gruntfile.js , proyek ini menggunakan pengaturan gerutuan modular. Setiap kunci opsi konfigurasi Grunt individu memiliki file sendiri yang terletak di grunt/config-lib/ (Readonly Upstream Configs, jangan memodifikasi ini secara langsung) atau grunt/config/ (Project Spesifik Configs). Anda dapat menggunakan kunci yang sama di kedua direktori, objek digabungkan dengan cerdas menggunakan gabungan lo-dash.
Untuk gabungan dalam pengaturan Gruntfile sebelumnya, Anda akan menambahkan kunci lain ke objek raksasa yang diteruskan ke grunt.initConfig seperti ini: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . Dalam konfigurasi baru, Anda akan membuat grunt/config/concat.js dengan module.exports = { /* YOUR CONFIG */ }; .
Lisensi MIT
