قم بتحميل واستيراد خطوط CSS Open Source المحددة في مشاريعك باستخدام Manager Node Package ...
جعل استيراد الخطوط الآن أسهل ... استيراد وتحميل فقط الخطوط اللازمة لخطوطك.
على سبيل المثال: يعمل موضوع CSS الخاص بي مع خط Roboto مع اختلافات 300،400،500،700. كل ما علي فعله هو استيراد هذا الخط المحدد والاختلافات.
هذه الحزمة تفعل ذلك من أجلك.
استلهمت هذه الخدمة من مشروع محارف Kyle Mathews حيث تم تحميل جميع الاختلافات جميع الخطوط معًا مما تسبب في انخفاض الأداء بسبب الخطوط الكبيرة التي تم تنزيلها.
فقط بالطريقة التي يمكنك القيام بها أدناه باستخدام Google Fonts:.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />
يمكنك الآن فعل الشيء نفسه مع NPM:
npm install --save font-face-roboto
يأتي كل خط خط خط مع جميع ملفات الخطوط اللازمة.
للاستخدام في مشروعك ، أضفه واستيراده في نقطة الدخول الخاصة بك:
import "typeface-roboto/300-400-500i-700.css";
سيؤدي القيام بما ورد أعلاه باستيراد خط الروبوتو مع اختلافات من 300ntormal و 400NATAL و 500ITILIC و 700 NORTAL فقط.
يفترض Typeface أنك تستخدم WebPack مع إعداد Loaders لتحميل ملفات CSS وملفات الخطوط (يمكنك استخدام محرف مع إعدادات أخرى ولكن WebPack تجعل الأمور بسيطة حقًا). على افتراض أن تكوين WebPack الخاص بك هو إعداد بشكل صحيح ، فأنت بحاجة فقط إلى طلب المحرف في ملف الإدخال لمشروعك.
استخدم مع WebPack من أجل الحزمة وحقن الملفات اللازمة في المشروع.
تعمل أدوات مثل Create-React-App و Gatsby خارج الصندوق مع هذا.
لا تتردد في استخدام مشاريع React الخاصة بك.
الدعم والمساهمات في هذا المشروع موضع تقدير كبير !!!