vite plugin webfont dl
v3.10.3
يجمع روابط WebFont والواردات والتعريفات من مشروع Vite الخاص بك ، وتنزيلات CSS وملفات الخطوط (الخصوصية الأولى) ، وإضافة الخطوط إلى حزمة (أو تخدم من خلال خادم 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 (عناوين) WebFont CSS التي تم تكوينها .
< link href =" [CSS URL] " rel =" stylesheet " >webfontDownload إلى مكونات Vite الخاصة بك مع عنوان URL (S) المحدد من 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'
] ) ,
] ,
} ; يتم حقن WebFonts وجاهزة للاستخدام .
يقوم المكون الإضافي بعمله بسلاسة سواء كنت تعمل على خادم التطوير المحلي أو بناء للإنتاج.
h1 {
font-family : 'Press Start 2P' , cursive;
}
h2 {
font-family : 'Fira Code' , monospace;
}لجعله يعمل مع Laravel Vite Plugin ، أضف هذا السطر إلى ملف النصل الخاص بك:
@vite ( ' webfonts.css ' )
cdn.jsdelivr.net ): يعمل مع تكوين صفر أو تكوين بسيطrsms.me ): يعمل مع تكوين صفر أو تكوين بسيط@font-face ) يعمل مع تكوين بسيط injectAsStyleTag ( boolean ، افتراضي: true ):
حقن webfonts كعلامة <style> (CSS المدمجة) أو كملف .css خارجي
minifyCss ( boolean ، افتراضي: قيمة build.minify ):
Minify CSS Code أثناء الإنشاء.
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 : '' ,
}
)؟ من خلال تجنب تقديم موارد التغلب على WebFonts من طرف ثالث ، يمكنك تعزيز أداء الصفحة مما يؤدي إلى خبرة مستخدم أفضل ويحسن نتائج كبار المسئولين الاقتصاديين .
يقوم المكون الإضافي بتنزيل الخطوط المعطاة من خدمة WebFont التابعة لجهة خارجية (مثل Fonts Google) وضخائها ديناميكيًا (كورقة أنماط داخلية أو خارجية) إلى مشروع Vite الخاص بك ، مما يحول Webfonts الطرف الثالث إلى تلك المستضافة ذاتيًا . ؟
؟ بالإضافة إلى زيادة كبيرة في الأداء ، سيستفيد زوارك أيضًا من حماية الخصوصية ، نظرًا لعدم وجود خادم تابع لجهة خارجية.
تقوم 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.googleapis.com . يحدث هذا في الخلفية لتحسين الأداء. [ preconnect ]fonts.gstatic.com . [ preconnect ]fonts.googleapis.com (مع font-display:swap ) . [ stylesheet ]@font-face التي تحتوي على عناوين URL من fonts.gstatic.com .fonts.gstatic.com .على العكس من ذلك ، يقوم WebFont-DL البرنامج المساعد بمعظم المهمة في وقت البناء ، ويترك الحد الأدنى للمتصفح.
WebFont-DL Plugin
index.html و CSS المولدة)<style> العلامة) أو ملف CSS WebFont / Outside<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 أو 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 ] مشروع Vite Starter مع
| ؟ | ||
|---|---|---|
| ؟ webfont.feat.agency | ؟ webfont-dl.feat.agency |
رخصة معهد ماساتشوستس للتكنولوجيا © 2022 الفذ.
