الاستيراد الصحيح للخطوط في ملف SCSS يمكن أن يكون أمرًا هامًا عند بناء مواقع الويب الداخلية التي قد تكون بدون اتصال بالإنترنت. عادةً ما يتم استخدام وحدة @import لاستيراد ملفات SCSS أو CSS. ومع ذلك، يتم استخدام وحدة @font-face في CSS لتحديد واستخدام الخطوط المخصصة.
للقيام بذلك في SCSS، يمكنك القيام بشيء مشابه للآتي:
scss@font-face {
font-family: 'CustomFont';
src: url('/path/to/fonts/file/customfont.woff2') format('woff2'),
url('/path/to/fonts/file/customfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
في هذا المثال، قمنا بتحديد خط مخصص باستخدام وحدة @font-face، ومن ثم قمنا بتطبيقه على النص في العنصر body. يجب استبدال ‘/path/to/fonts/file/’ بالمسار الفعلي للملفات على الخادم الخاص بك.
يجب التأكيد على توفر الصيغ الملائمة للخطوط مثل WOFF2 و WOFF، ويمكنك إضافة المزيد حسب الحاجة.
إذا كنت تريد إدارة مجموعة كبيرة من الخطوط، يمكنك وضعها في مجلد محدد على الخادم واستخدام الحل السابق مع تعديل المسارات وفقًا لهيكل المجلد.
المزيد من المعلومات
تعتبر وحدة @font-face في CSS وSCSS وسيلة فعالة لتحديد الخطوط المخصصة واستخدامها في تصميمات مواقع الويب. القدرة على استيراد الخطوط محليًا من الخادم تعزز أداء الموقع وتضمن تحميل الصفحات بشكل أسرع، خاصةً في البيئات الداخلية حيث قد تكون الاتصالات بالإنترنت محدودة.
يمكنك تحسين الكفاءة أكثر من ذلك عند تحميل صيغ الخطوط المناسبة للمتصفحات المستهدفة، مثل WOFF2 للمتصفحات الحديثة و WOFF لتوافق أفضل مع المتصفحات القديمة. يمكنك أيضًا توفير نسخ متعددة من الخط بأوزان وأنماط مختلفة لتعزيز تنوع الاستخدام.
عندما تتعامل مع مشاريع كبيرة، قد يكون من الفائدة إنشاء ملفات SCSS مخصصة لإدارة المتغيرات والأنماط الخاصة بالخطوط. يمكنك تخزين مسارات الخطوط والمتغيرات المتعلقة بها في ملف مستقل لتحسين صيانة الشيفرة وإعادة استخدام الأكواد.
علاوة على ذلك، يجب أن تضمن توفير نسخ احتياطية للخطوط واستخدام ملفات الخطوط المضغوطة لتقليل حجم التحميل وتحسين أداء الموقع. في نهاية المطاف، يتعين عليك اختبار الموقع على مجموعة متنوعة من المتصفحات لضمان توافق الخطوط وظهورها بشكل صحيح على جميع الأجهزة.
