Beranda>Sumber daya pembuatan situs web>Pengunduhan font
Unduh

? Webfont Dowload Vite Plugin ⚡

Mengumpulkan tautan webfont, impor dan definisi dari proyek vite Anda, mengunduh file CSS dan font (privasi-pertama) , tambahkan font ke bundel Anda (atau berfungsi melalui server dev) , dan menyuntikkan definisi font menggunakan metode pemblokiran non-render , sementara menyimpan CSS eksternal dan file font dalam file cache yang tersedia , membuat cache, membuat cache, membuat cache .


? Memasang 

npm i vite-plugin-webfont-dl -D

Daftar isi

  1. ? Memasang
  2. Penggunaan:
    • ? Nol konfigurasi [metode a]
    • ? Konfigurasi sederhana [metode b]
  3. Itu saja!
    • ? Laravel
    • ? Tangkapan layar
  4. ? Penyedia Webfont yang didukung
  5. Opsi
  6. ❓ webfont pihak ketiga
  7. ? Cara kerjanya
    • ? Google Fonts
    • ? Plugin Vite Webfont-DL
  8. Benchmark
  9. Sumber daya
  10. ? Lisensi

? Penggunaan: nol konfigurasi [metode a]

Ekstrak, unduhan dan suntikan font dari cuplikan kode Google Fonts asli .

  1. Pilih keluarga font Anda di penyedia webfont Anda (misalnya Google Fonts) dan salin kode ke <head> dari blok "Gunakan di Web" : 
     < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >
  2. Tambahkan webfontDownload ke plugin vite Anda tanpa konfigurasi dan plugin secara otomatis akan mengurus semuanya: 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;
  3. Tag Webfont asli akan diganti dalam dist/index.html : 
     < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? Penggunaan: konfigurasi sederhana [metode b]

Ekstrak, unduhan dan suntikan font dari URL Webfont CSS yang dikonfigurasi .

  1. Pilih keluarga font Anda di penyedia webfont Anda (misalnya Google Fonts) dan salin URL CSS dari blok kode "Gunakan di Web" : 
     < link href =" [CSS URL] " rel =" stylesheet " >
  2. Tambahkan webfontDownload ke plugin Vite Anda dengan URL Google Fonts CSS yang dipilih: 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( [
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
    ] ) ,
  ] ,
} ;

Itu saja!

Webfont disuntikkan dan siap digunakan .
Plugin melakukan pekerjaannya dengan mulus apakah Anda sedang mengerjakan server pengembangan lokal atau membangun produksi. 

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

? Laravel

Untuk membuatnya bekerja dengan plugin Laravel Vite, tambahkan baris ini ke file blade Anda: 

 @vite ( ' webfonts.css ' )

? Tangkapan layar


? Penyedia Webfont yang didukung

  • Google Fonts : Bekerja dengan nol konfigurasi atau konfigurasi sederhana
  • Bunny Fonts : Bekerja dengan nol konfigurasi atau konfigurasi sederhana
  • FontShare : Bekerja dengan nol konfigurasi atau konfigurasi sederhana
  • FIRA Code , Hack Fonts ( cdn.jsdelivr.net ): Bekerja dengan nol konfigurasi atau konfigurasi sederhana
  • Inter Font ( rsms.me ): Bekerja dengan nol konfigurasi atau konfigurasi sederhana
  • Penyedia apa pun dengan CSS (berisi @font-face definisi) berfungsi dengan konfigurasi sederhana

Opsi

  • injectAsStyleTag ( boolean , default: true ):
    Suntikkan Webfont sebagai tag <style> (CSS tertanam) atau sebagai file .css eksternal

  • minifyCss ( boolean , default: nilai build.minify ):
    Minify CSS Code selama Build.

  • embedFonts ( boolean , default: false ):
    Embed font encoded base64 ke dalam CSS.
    Dalam beberapa kasus dapat menyebabkan peningkatan file jika CSS berisi beberapa referensi ke file font yang sama. Contoh

  • async ( boolean , default: true ):
    Cegah penggunaan penangan acara inline ( webfonts.css ) yang dapat menyebabkan masalah kebijakan keamanan konten.
    Hanya bekerja dengan injectAsStyleTag:false .

  • cache ( boolean , default: true ):
    Simpan secara terus -menerus yang diunduh CSS dan file font di cache file lokal.
    Jika diatur ke false cache yang ada akan dihapus.

  • proxy ( false|AxiosProxyConfig , default: false ):
    Konfigurasi proxy untuk permintaan jaringan.

  • assetsSubfolder ( string , Default: '' ):
    Pindah file font yang diunduh untuk memisahkan subfolder dalam direktori aset.

penggunaan: 

 ViteWebfontDownload (
  [ ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

atau: 

 ViteWebfontDownload (
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
  ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

❓ webfont pihak ketiga

️ Menggunakan metode standar untuk menambahkan webfont pihak ketiga (Google Fonts, Bunny Fonts atau FontShare) ke halaman web dapat memperlambat pemuatan halaman secara signifikan. Wawasan Mercusuar dan Pagespeed menyebutnya "sumber daya pemblokiran render" , yang berarti halaman tidak dapat sepenuhnya membuat sampai Webfont CSS belum diambil dari server jarak jauh.

? Dengan menghindari sumber daya pemblokiran render yang disebabkan oleh webfont pihak ketiga, Anda dapat meningkatkan kinerja halaman yang mengarah pada pengalaman pengguna yang lebih baik dan meningkatkan hasil SEO .

Plugin mengunduh font yang diberikan dari layanan webfont pihak ketiga (seperti Google Fonts) dan secara dinamis menyuntikkannya (sebagai stylesheet internal atau eksternal) menjadi proyek vite Anda, mengubah webfont pihak ketiga menjadi yang diselenggarakan sendiri . ?

? Selain peningkatan kinerja yang signifikan, pengunjung Anda juga akan mendapat manfaat untuk perlindungan privasi , karena tidak ada server pihak ketiga yang terlibat.


? Cara kerjanya

? Google Fonts

Google Fonts menghasilkan kode berikut yang harus Anda suntikan ke dalam <head> situs web Anda, contoh : 

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >

Apa yang terjadi di sisi klien dengan Google Fonts :

  1. Baris pertama memberikan petunjuk kepada browser untuk memulai jabat tangan koneksi (DNS, TCP, TLS) dengan fonts.googleapis.com . Ini terjadi di latar belakang untuk meningkatkan kinerja. [ preconnect ]
  2. Baris kedua adalah petunjuk prakisatan lain untuk fonts.gstatic.com . [ preconnect ]
  3. Baris ketiga menginstruksikan browser untuk memuat dan menggunakan file CSS Stylesheet dari fonts.googleapis.com (dengan font-display:swap ) . [ stylesheet ]
  4. Browser mengunduh file CSS dan mulai menguraikannya. CSS yang diuraikan adalah satu set definisi @font-face yang berisi URL font dari server fonts.gstatic.com .
  5. Browser mulai mengunduh semua font yang relevan dari fonts.gstatic.com .
  6. Setelah font yang berhasil mengunduh browser bertukar font fallback ke yang diunduh.

?

? Plugin Vite Webfont-DL

Sebaliknya, plugin Webfont-DL melakukan sebagian besar pekerjaan pada waktu pembangunan, meninggalkan minimum ke browser.

Plugin Webfont-DL

  • Mengumpulkan URL Webfont CSS (dari Plugin Config, index.html dan CSS yang dihasilkan)
  • Unduh File Webfont CSS
  • mengekstrak url font
  • Unduh font
  • Menambahkan font ke bundel
  • Menghasilkan CSS Tertanam (Tag <style> ) atau file CSS Webfont / Eksternal
  • Tambahkan mereka ke bundel dan menyuntikkan kode berikut ke dalam <head> situs web Anda menggunakan metode pemblokiran non-render, contoh : 
 < style >
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</ style >

atau (menggunakan server dev atau injectAsStyleTag: false ) 

 < link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >

Apa yang terjadi di sisi klien dengan plugin Webfont-DL :

  1. Muat font dari tag CSS ( <style> tertanam).

atau

  1. Baris pertama menginstruksikan browser untuk memilih file CSS untuk digunakan nanti sebagai stylesheet. [ preload ]
  2. Baris kedua menginstruksikan browser untuk memuat dan menggunakan file CSS itu sebagai stylesheet " print " (pemblokiran non-render) . Setelah memuatnya mempromosikan ke " all " Media Type Stylesheet (dengan menghapus atribut " media "). [ stylesheet ]

Benchmark

Proyek Starter Vite dengan

▶ ️ Font Google Standar ? ▶ ️ Plugin Webfont DL Vite
? webfont.feat.agency ? Webfont-DL.Feat.agency

Membandingkan


Sumber daya

  • Page Speed CheckList / Perbaiki & Hilangkan Sumber Daya Pemblokiran Render

? Lisensi

Lisensi MIT © 2022 Feat.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua