حزم الخطوط في تطبيق الويب الخاص بك

خطوط الاستضافة الذاتية

إذا كنت ترغب في تجميع الخطوط المستخدمة في تطبيق الويب الخاص بك ، فإن Fontsource هي مكتبة قد ترغب في إلقاء نظرة عليها (يوجد رابط أيضًا في ملحق في نهاية الصفحة). يسمح لك بتثبيت الخطوط التي تريد استهلاكها ، مما يعني أن خطوطك مستضافة بنفسك ولا تتطلب تحميل CDN.

تثبيت كل خط

لتثبيت الخطوط التي تريد استخدامها ، ما عليك سوى تشغيل أمر التثبيت لكل متغير. توضح مقتطفات التعليمات البرمجية التالية كيف سيتم تثبيت خط PWA هذا.

npm install @fontsource/work-sans

في نقطة دخول تطبيقي ، يجب أن أستهلك الحزمة المثبتة عن طريق استيرادها. هذا يسمح لي بتحديد ما أحتاجه بدقة دون إضافة أي تكاليف إضافية. نظرًا لأن الخطوط يمكن أن تكون كبيرة الحجم ، فهذه فرصة رائعة لحفظ وحدات البايت.

import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";

أخيرًا ، أحتاج إلى تعيين عائلة الخطوط في CSS الخاص بي. اعتمادًا على المكتبة التي تستخدمها (على سبيل المثال Tailwind.css) ، قد يبدو هذا الرمز مختلفًا قليلاً بالنسبة لك.

body {
  font-family: "Work Sans", sans-serif;
}

خطوط متغيرة

يوفر Fontsource أيضًا خيارًا لتثبيت الخطوط المتغيرة ، مما يعني أنه يمكنك الوصول إلى أحدث الأدوات عندما يتعلق الأمر بتحميل الخطوط. يرجى ملاحظة أنه ليست كل الخطوط متاحة كمتغيرات متغيرة.