Unduh fontfaceobserver - Unduh Kode Sumber fontfaceobserver

fontfaceobserver

Kode sumber lainnya

1.0.0

Unduh

Font Face Observer

Font Face Observer adalah loader dan monitor @font-face kecil (3.5kb Minified dan 1.3kb Gzipping) kompatibel dengan layanan webfont apa pun. Ini akan memantau ketika webfont dimuat dan memberi tahu Anda. Itu tidak membatasi Anda dengan cara apa pun di mana, kapan, atau bagaimana Anda memuat webfont Anda. Berbeda dengan Web Font Loader Font Face Observer menggunakan peristiwa gulir untuk mendeteksi beban font secara efisien dan dengan overhead minimum.

Cara menggunakan

Sertakan aturan @font-face Anda seperti biasa. Font dapat dipasok oleh layanan font seperti Google Fonts, Typekit, dan WebType atau diselenggarakan sendiri. Anda dapat mengatur pemantauan untuk satu keluarga font sekaligus:

 var font = new FontFaceObserver ( 'My Family' , {
  weight : 400
} ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

Konstruktor FontFaceObserver mengambil dua argumen: nama keluarga font (diperlukan) dan objek yang menggambarkan variasi (opsional). Objek dapat berisi weight , style , dan stretch properti. Jika suatu properti tidak ada, itu akan default menjadi normal . Untuk mulai memuat font, panggil metode load . Ini akan segera mengembalikan janji baru yang menyelesaikan ketika font dimuat dan ditolak ketika font gagal memuat.

Jika font Anda tidak berisi setidaknya karakter "Besbwy" Latin, Anda harus melewati string tes khusus ke metode load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( '中国' ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

Batas waktu default untuk menyerah pada pemuatan font adalah 3 detik. Anda dapat meningkatkan atau mengurangi ini dengan melewati sejumlah milidetik sebagai parameter kedua untuk metode load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( null , 5000 ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available after waiting 5 seconds' ) ;
} ) ;

Beberapa font dapat dimuat dengan membuat instance FontFaceObserver untuk masing -masing.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

fontA . load ( ) . then ( function ( ) {
  console . log ( 'Family A is available' ) ;
} ) ;

fontB . load ( ) . then ( function ( ) {
  console . log ( 'Family B is available' ) ;
} ) ;

Anda juga dapat memuat keduanya secara bersamaan, daripada memuat masing -masing secara individual.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

Promise . all ( [ fontA . load ( ) , fontB . load ( ) ] ) . then ( function ( ) {
  console . log ( 'Family A & B have loaded' ) ;
} ) ;

Jika Anda bekerja dengan sejumlah besar font, Anda dapat memutuskan untuk membuat instance FontFaceObserver secara dinamis:

 // An example collection of font data with additional metadata,
// in this case “color.”
var exampleFontData = {
  'Family A' : { weight : 400 , color : 'red' } ,
  'Family B' : { weight : 400 , color : 'orange' } ,
  'Family C' : { weight : 900 , color : 'yellow' } ,
  // Etc.
} ;

var observers = [ ] ;

// Make one observer for each font,
// by iterating over the data we already have
Object . keys ( exampleFontData ) . forEach ( function ( family ) {
  var data = exampleFontData [ family ] ;
  var obs = new FontFaceObserver ( family , data ) ;
  observers . push ( obs . load ( ) ) ;
} ) ;

Promise . all ( observers )
  . then ( function ( fonts ) {
    fonts . forEach ( function ( font ) {
      console . log ( font . family + ' ' + font . weight + ' ' + 'loaded' ) ;

      // Map the result of the Promise back to our existing data,
      // to get the other properties we need.
      console . log ( exampleFontData [ font . family ] . color ) ;
    } ) ;
  } )
  . catch ( function ( err ) {
    console . warn ( 'Some critical font are not available:' , err ) ;
  } ) ;

Contoh berikut meniru fout dengan Font Face Observer untuk My Family .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  document . documentElement . className += " fonts-loaded" ;
} ) ;

. fonts-loaded {
  body {
    font-family : My Family , sans-serif;
  }
}

Instalasi

Jika Anda menggunakan NPM, Anda dapat menginstal Font Face Observer sebagai ketergantungan:

$ npm install fontfaceobserver

Anda kemudian dapat meminta fontfaceobserver sebagai modul CommonJS (Browserify):

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'My Family has loaded' ) ;
} ) ;

Jika Anda tidak menggunakan NPM, ambil fontfaceobserver.js atau fontfaceobserver.standalone.js (lihat di bawah) dan sertakan dalam proyek Anda. Ini akan mengekspor FontFaceObserver global yang dapat Anda gunakan untuk membuat contoh baru.

Font Face Observer menggunakan janji -janji dalam API -nya, jadi untuk browser yang tidak mendukung janji Anda harus memasukkan polyfill. Jika Anda menggunakan janji Polyfill Anda sendiri, Anda hanya perlu menyertakan fontfaceobserver.standalone.js dalam proyek Anda. Jika Anda tidak memiliki janji Polyfill yang ada, Anda harus menggunakan fontfaceobserver.js yang mencakup janji kecil polyfill. Menggunakan janji Polyfill menambahkan sekitar 1,4kb (500 byte Gzipped) ke ukuran file.