Unduh gatsby omni font loader - Unduh Kode Sumber gatsby omni font loader

gatsby omni font loader

Pengunduhan font

v2.0.2

Unduh

Gatsby Omni Font Loader V2

Cara sederhana untuk menambahkan webfont atau font khusus ke proyek gatsby
Pemuatan font asinkron performant dapat diaktifkan
Pendengar pemuatan font dapat diaktifkan
Flash of Untunged Text (Fout) Dukungan Penanganan

Fitur

Mendukung Web Fonts & Self-Hosted Fonts
Preloads file & prakisap ke URL
Memuat font secara tidak sinkron untuk menghindari pemblokiran render
Diimplementasikan dengan cuplikan pemuatan cepat
Memuat status pendengar untuk menghindari fout
Ukuran kecil & jejak minimal

Memasang

npm install gatsby-omni-font-loader react-helmet

atau

yarn add gatsby-omni-font-loader react-helmet

Konfigurasi

Tambahkan cuplikan berikut ke array plugin gatsby-config.js .

 {
  /* Include plugin */
  resolve : "gatsby-omni-font-loader" ,

  /* Plugin options */
  options : {

    /* Font loading mode */
    mode : "async" ,

    /* Enable font loading listener to handle FOUT */
    enableListener : true ,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect : [ "https://fonts.gstatic.com" ] ,

    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
    custom : [
      {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
        /* Path to the font CSS file inside the "static" folder with @font-face definition */
        file : "/fonts/fontAwesome/css/all.min.css" ,
      } ,
    ] ,

    /* Web fonts. File link should point to font CSS file. */
    web : [ {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : "Staatliches" ,
        /* URL to the font CSS file with @font-face definition */
        file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
      } ,
    ] ,
  } ,
}

Opsi

Pilihan	Keterangan	Bawaan
mode	Dapat diatur ke `async` (default) atau `render-blocking` . Dalam mode `async` , font dimuat dengan cara yang optimal, tetapi fout terlihat. Dalam mode `render-blocking` akan terjadi dalam kasus yang jarang terjadi, tetapi file font akan menjadi pemblokiran render.	async
cakupan	Dapat diatur ke `body` (default) atau `html` . Menetapkan elemen target untuk ClassNames HTML untuk diterapkan.	tubuh
enablelistener	Bekerja dalam mode `async` . Aktifkan pendengar memuat font untuk menangani kilatan teks yang tidak terhubung. Jika diaktifkan, kelas CSS akan diterapkan pada HTML setelah setiap font selesai memuat.	PALSU
interval (hanya v1)	Bekerja jika `enableListener` adalah `true` . Interval pendengar font (dalam MS). Default adalah 300ms. Direkomendasikan:> = 300ms.	300
Batas waktu (hanya V1)	Bekerja jika `enableListener` adalah `true` . Nilai batas waktu pendengar font (dalam MS). Default adalah 30 -an (30000ms). Pendengar tidak akan lagi memeriksa font yang dimuat setelah timeout, font masih akan dimuat dan ditampilkan, tetapi tanpa menangani fout.	30000
kebiasaan	Konfigurasi font yang diselenggarakan sendiri. Tambahkan file font dan file font CSS ke folder `static` . Array `{name: "Font name", file: "https://url-to-font-css.path"}` objek.	`[]`
web	Web Font Config. Tautan file harus menunjuk ke file font CSS. Array `{name: "Font name", file: "https://url-to-font-css.path"}` objek.	`[]`
prakoneksi	URL yang digunakan untuk meta prakisap. URL dasar di mana file font di -host.	`[]`
preload	URL tambahan yang digunakan untuk meta preload. Preload untuk URL yang disediakan di bawah Atribut `file` Font `custom` dan `web` dihasilkan secara otomatis.	`[]`

Mode Async vs mode pemblokiran render

Mode async

Muat stylesheet dan file font dalam mode prioritas rendah. Jika Anda ingin menambahkan font dengan cara performant, tangani fout sendiri dan pastikan bahwa waktu render halaman rendah, Anda harus menggunakan mode async .

Kelebihan: Kinerja, konten ditampilkan sebelum file font diunduh dan diuraikan
Cons: Fout perlu ditangani

Mode pemblokiran render

Muat stylesheet dan file font dalam mode prioritas tinggi. Jika Anda ingin menggunakan plugin ini sebagai cara sederhana untuk menambahkan font ke proyek Anda seperti yang akan Anda lakukan di proyek lain, tanpa optimasi kinerja dan penanganan fout, Anda harus menggunakan mode render-blocking .

Kelebihan: markup sederhana, fout tidak akan terjadi dalam banyak kasus
Cons: Font Stylesheets and Font Files dapat menunda waktu cat konten pertama

Menangani fout dengan pendengar pemuatan font

Saat memuat font secara tidak sinkron, kilat teks yang tidak tertutup (fout) mungkin terjadi karena font memuat beberapa saat kemudian setelah halaman ditampilkan kepada pengguna.

Untuk menghindari hal ini, kita dapat menggunakan CSS untuk menata font fallback agar sangat cocok dengan ukuran font, tinggi saluran, dan jarak huruf dari font utama yang sedang dimuat.

When enableListener: true diatur dalam konfigurasi plugin di gatsby-config.js , kelas html ditambahkan ke elemen <body> saat font sedang dimuat.

Format nama kelas HTML akan berada dalam format berikut wf-[font-family-name] . Ketika semua font dimuat dengan wf-all diterapkan.

Anda dapat menggunakan pencocokan gaya font untuk menyesuaikan font font dan fallback CSS config.

Berikut adalah contoh bagaimana elemen body akan terlihat seperti semua font sedang dimuat (tergantung pada konfigurasi).

 < body
  class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body >

V2 Breaking Changes

Opsi interval dan timeout yang dihapus
Format nama kelas yang diubah menjadi wf-[font-family-name] untuk menghindari pencampuran konvensi penamaan