vite plugin webfont dl
v3.10.3
รวบรวมลิงค์เว็บฟอนท์การนำเข้าและคำจำกัดความ จากโครงการ VITE ของคุณ ดาวน์โหลด ไฟล์ CSS และ FONT (ความเป็นส่วนตัวครั้งแรก) เพิ่มฟอนต์ลงใน ชุดข้อมูล ของคุณ (หรือทำหน้าที่ผ่าน เซิร์ฟเวอร์ Dev) และ ฉีด คำจำกัดความแบบ อักษร
npm i vite-plugin-webfont-dl -Dแยกการดาวน์โหลดและการฉีดแบบอักษรจาก ตัวอย่างโค้ด Google Fonts ดั้งเดิม
<head> จากบล็อก "ใช้บนเว็บ" : < 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 " >webfontDownload ลงในปลั๊กอิน VITE ของคุณโดยไม่ต้องกำหนดค่าและปลั๊กอินโดยอัตโนมัติจะดูแลทุกอย่าง: // vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl' ;
export default {
plugins : [
webfontDownload ( ) ,
] ,
} ;dist/index.html : < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style > แยกการดาวน์โหลดและการฉีดแบบอักษรจาก URL CSS ของ WebFont CSS ที่กำหนดค่าไว้
< link href =" [CSS URL] " rel =" stylesheet " >webfontDownload ลงในปลั๊กอิน VITE ของคุณด้วย URL ของ Google Fonts CSS ที่เลือก: // 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'
] ) ,
] ,
} ; เว็บฟอนต์ถูก ฉีดและพร้อมใช้งาน
ปลั๊กอินทำงานได้อย่างราบรื่นไม่ว่าคุณจะทำงานบนเซิร์ฟเวอร์การพัฒนาท้องถิ่นหรือสร้างการผลิต
h1 {
font-family : 'Press Start 2P' , cursive;
}
h2 {
font-family : 'Fira Code' , monospace;
}เพื่อให้ใช้งานได้กับปลั๊กอิน Laravel Vite เพิ่มบรรทัดนี้ในไฟล์ใบมีดของคุณ:
@vite ( ' webfonts.css ' )
cdn.jsdelivr.net ): ทำงานกับการกำหนดค่าเป็นศูนย์หรือการกำหนดค่าแบบง่ายrsms.me ): ทำงานกับศูนย์การกำหนดค่าหรือการกำหนดค่าแบบง่าย@font-face ) ทำงานร่วมกับการกำหนดค่าแบบง่าย injectAsStyleTag ( boolean , ค่าเริ่มต้น: true ):
Inject Webfonts เป็นแท็ก <style> (CSS แบบฝังตัว) หรือเป็นไฟล์ .css ภายนอก
minifyCss ( boolean , ค่าเริ่มต้น: ค่าของ build.minify ):
minify css รหัสระหว่างการสร้าง
embedFonts ( boolean , ค่าเริ่มต้น: false ):
ฝังแบบอักษรที่เข้ารหัส Base64 ลงใน CSS
ในบางกรณีอาจทำให้ขนาดไฟล์เพิ่มขึ้นหาก CSS มีการอ้างอิงหลายรายการไปยังไฟล์ตัวอักษรเดียวกัน ตัวอย่าง
async ( boolean , ค่าเริ่มต้น: true ):
ป้องกันการใช้งานของตัวจัดการเหตุการณ์แบบอินไลน์ ( webfonts.css ) ที่อาจทำให้เกิดปัญหานโยบายความปลอดภัยของเนื้อหา
ใช้งานได้เฉพาะกับ injectAsStyleTag:false
cache ( boolean , ค่าเริ่มต้น: true ):
จัดเก็บไฟล์ CSS และตัวอักษรที่ดาวน์โหลดอย่างต่อเนื่องในแคชไฟล์ท้องถิ่น
หากตั้งค่าเป็น false แคชที่มีอยู่จะถูกลบ
proxy ( false|AxiosProxyConfig , ค่าเริ่มต้น: false ):
การกำหนดค่าพร็อกซีสำหรับคำขอเครือข่าย
assetsSubfolder ( string , ค่าเริ่มต้น: '' ):
ย้ายไฟล์ตัวอักษรที่ดาวน์โหลดมาเพื่อแยกโฟลเดอร์ย่อยในไดเรกทอรีสินทรัพย์
การใช้งาน:
ViteWebfontDownload (
[ ] ,
{
injectAsStyleTag : true ,
minifyCss : true ,
embedFonts : false ,
async : true ,
cache : true ,
proxy : false ,
assetsSubfolder : '' ,
}
)หรือ:
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 : '' ,
}
)- ด้วยการหลีกเลี่ยงทรัพยากรที่ปิดกั้นการแสดงผลที่เกิดจากเว็บฟอนต์ของบุคคลที่สามคุณสามารถ เพิ่มประสิทธิภาพของหน้าเว็บ ซึ่งนำไปสู่ ประสบการณ์ของผู้ใช้ที่ดีขึ้น และ ปรับปรุงผลลัพธ์ SEO
ปลั๊กอิน ดาวน์โหลดแบบอักษรที่กำหนดจากบริการเว็บฟอนท์ของบุคคลที่สาม (เช่น Google Fonts) และฉีดมันแบบไดนามิก (เป็นรูปแบบภายในหรือภายนอก) เป็นโครงการ Vite ของคุณเปลี่ยนเว็บฟอนต์ของ บุคคล ที่สาม -
- นอกเหนือจาก การเพิ่มประสิทธิภาพ ที่สำคัญผู้เข้าชมของคุณจะได้รับประโยชน์จาก การป้องกันความเป็นส่วนตัว เนื่องจากไม่มีเซิร์ฟเวอร์บุคคลที่สามที่เกี่ยวข้อง
Google Fonts สร้างรหัสต่อไปนี้ที่คุณต้องฉีดเข้าไปใน <head> ของเว็บไซต์ของคุณ ตัวอย่าง :
< 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 " >จะเกิดอะไรขึ้นใน ฝั่งไคลเอ็นต์ กับ Google Fonts :
fonts.googleapis.com สิ่งนี้เกิดขึ้นในพื้นหลังเพื่อปรับปรุงประสิทธิภาพ [ preconnect ]fonts.gstatic.com [ preconnect ]fonts.googleapis.com (ด้วย font-display:swap ) [ stylesheet ]@font-face ที่มี URL แบบอักษรจากเซิร์ฟเวอร์ fonts.gstatic.comfonts.gstatic.comในทางตรงกันข้าม ปลั๊กอิน WebFont-DL ทำงานส่วนใหญ่ของงานในเวลาสร้างออกจากเบราว์เซอร์ขั้นต่ำ
ปลั๊กอิน WebFont-DL
index.html และ CSS ที่สร้างขึ้น)<style> แท็ก) หรือ ไฟล์ css webfont / ภายนอก<head> ของเว็บไซต์ของคุณโดยใช้วิธีการบล็อกที่ไม่แสดงผล ตัวอย่าง : < 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 > หรือ (ใช้ dev server หรือ 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 " >จะเกิดอะไรขึ้นใน ฝั่งไคลเอ็นต์ ด้วย ปลั๊กอิน WebFont-DL :
<style> แท็ก)หรือ
preload ]print " (การปิดกั้นที่ไม่ใช่เรนเดอร์) หลังจากโหลดแล้วจะโปรโมตเป็นรูปแบบของสื่อประเภท " all " (โดยการลบแอตทริบิวต์ " media ") [ stylesheet ] โครงการ Starter Vite ด้วย
| - | ||
|---|---|---|
| - webfont.feat.agency | - webfont-dl.feat.agency |
ใบอนุญาต MIT © 2022 feat.
