غالبا ما يواجه مصممو الويب والمطورون الحاجة إلى استخدام خطوط معينة على مواقع الويب الخاصة بهم. ومع ذلك ، للتأكد من عرض الخط المحدد على أجهزة كمبيوتر المستخدمين ، تحتاج إلى تثبيته بشكل صحيح على موقعك. في هذه المقالة ، سننظر في كيفية تثبيت خط تلقائيا على موقع ويب باستخدام كس.
الخطوة الأولى هي اختيار الخط المناسب لموقعك. فمن المستحسن أن تختار الخط الذي يقرأ جيدا ويتطابق مع النمط العام والأهداف من موقع الويب الخاص بك. هناك العديد من الموارد على الانترنت حيث يمكنك العثور على الخطوط المجانية والمدفوعة مثل جوجل الخطوط ، تيبكيت والسنجاب الخط.
بعد تحديد الخط ، ستحتاج إلى توصيله على موقع الويب الخاص بك. أولا وقبل كل شيء ، تحتاج إلى إضافة رمز إلى ملف كس الخاص بك. يمكنك استخدام قاعدة @ وجه الخط لتحديد المسار إلى ملف الخط. على سبيل المثال:
@الخط الوجه {
الخط الأسرة: "اسم الخط";
سرك: ورل ("مسار ملف الخط");
}
بعد إضافة هذا الرمز إلى ملف كس الخاص بك ، يمكنك استخدام الخط الجديد على موقعك. على سبيل المثال ، لتطبيق خط على العناوين ، يمكنك إضافة التعليمات البرمجية التالية:
الآن سيستخدم موقعك تلقائيا الخط المحدد للعناوين الرئيسية. يمكنك متابعة هذه العملية لعناصر أخرى من موقعك ، مثل الفقرات والروابط وما إلى ذلك.
- اختيار الخط والتحميل
- كيفية اختيار الخط المناسب لموقعك
- تثبيت خط على صفحة ويب
- طرق تثبيت الخط باستخدام كس
- التحقق والتحسين
اختيار الخط والتحميل
عند اختيار الخط ، يجدر النظر في توافقه مع مختلف الأجهزة والمتصفحات ، وكذلك ترخيصه. قد تكون بعض الخطوط مجانية الاستخدام ، وبعضها يتطلب الشراء أو الإذن من المؤلف.
يمكن تحميل الخطوط على الموقع بطرق مختلفة. واحدة من أكثر الطرق شعبية هي استخدام خدمات خطوط الويب مثل خطوط جوجل أو خطوط أدوبي. تقدم هذه الخدمات مجموعة مختارة من الخطوط من مجموعة ضخمة وتوفر رمزا جاهزا لربطها بالموقع.
لاستخدام الخطوط باستخدام خطوط جوجل ، تحتاج إلى إضافة التعليمات البرمجية التالية إلى قسم مستند هتمل الخاص بك:
الجسم {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
يرجى ملاحظة أنه إذا كان الخط المحدد ليس على جهاز الكمبيوتر الخاص بالمستخدم ، فإن المتصفح تلقائيا استخدام الخط المحدد الثاني في وسيطة "الخط الأسرة" ، على سبيل المثال ، "بلا الرقيق" في هذه الحالة. هذا يضمن التوافق عبر المتصفح ويجعل من الممكن الحفاظ على مظهر الموقع على الأجهزة المختلفة.
وبالتالي ، يعد اختيار الخط وتحميله على موقع ويب خطوة مهمة في إنشائه. سيساعد الخط المختار جيدا في إنشاء تصميم فريد وجذاب ، فضلا عن توفير قراءة مريحة للمحتوى.
كيفية اختيار الخط المناسب لموقعك
فيما يلي بعض العوامل المهمة التي يجب مراعاتها عند اختيار الخط:
1. سياق الموقع والغرض منه: يجب أن يتطابق الخط مع نمط وموضوع موقعك. على سبيل المثال ، بالنسبة لموقع ويب رسمي أو احترافي ، من الأفضل اختيار خط كلاسيكي وخطير. بالنسبة لموقع إبداعي أو ألعاب ، يمكنك استخدام المزيد من الخطوط التجريبية وغير القياسية.
2. سهولة القراءة: تتمثل الوظيفة الرئيسية للخط في ضمان سهولة قراءة النص. لذلك ، من المهم اختيار الخطوط التي يمكن قراءتها بأحجام مختلفة وعلى أجهزة مختلفة. يجب أيضا الانتباه إلى كيفية ظهور الخط على الخلفية بحيث يكون متناقضا بدرجة كافية بحيث يمكن تمييز النص بسهولة.
3. التوافق: لا تعمل جميع الخطوط على جميع الأجهزة والمتصفحات. لذلك ، يوصى باختيار الخطوط التي يدعمها أكبر عدد من الأنظمة الأساسية. يمكنك أيضا استخدام رمز كس المناسب لجعل موقعك قابلا للقراءة على جميع الأجهزة.
4. مظهر احترافي: يجب أن يعطي الخط انطباعا عن الاحتراف والجودة. عند اختيار الخط ، يجب الانتباه إلى تفاصيله ونسبه ونظام الألوان. يجب أن يكون الخط متوازنا وأن يبدو جيدا مع العناصر الأخرى لتصميم الموقع.
ضع ملف الخط على الخادم أو في مجلد المشروع.
@الخط الوجه
}
بدلا من المسار إلى ملف / ملف.التمديد
هو المسار إلى ملف الخط.
بعد إضافة القاعدة
@الخط الوجه
يمكنك استخدام الخط المحدد على صفحة ويب من خلال تطبيقه على العناصر المطلوبة باستخدام الخاصية
الخط الأسرة
. يوجد أدناه مثال لتطبيق خط على عنصر:
ص {
الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق;
}
في المثال أعلاه ، سيتم تطبيق الخط على جميع العناصر
على صفحة الويب. إذا كنت بحاجة إلى تطبيق الخط على عناصر أخرى ، فأنت بحاجة إلى التغيير
ف محدد
إلى المطلوب.
الآن سيتم عرض الخط على صفحة الويب لجميع المستخدمين الذين زاروا الموقع.
طرق تثبيت الخط باستخدام كس
توفر أنماط كس عدة طرق لتعيين خط على موقع ويب:
1. استخدام خطوط الويب
تسمح لك خطوط الويب باستخدام الخطوط غير المثبتة على جهاز الكمبيوتر الخاص بالمستخدم. للقيام بذلك ، يمكنك استخدام خدمات مثل خطوط جوجل أو خطوط أدوبي ، أو تحميل الخطوط إلى الخادم الخاص بك.
مثال على توصيل خط من خطوط جوجل:
المغلق:
@استيراد رابط ('https://fonts.googleapis.com/css2 ?family=Roboto:wght@400; 700 & عرض = مبادلة');
في هذه الحالة ، نقوم باستيراد خط روبوتو بوزن 400 (عادي) و 700 (غامق) للاستخدام على موقع الويب.
2. استخدام خطوط النظام
خطوط النظام هي خطوط مثبتة على كمبيوتر المستخدم. يمكنك استخدامها عن طريق تحديد أسمائهم في كس.
مثال على استخدام خطوط النظام:
المغلق:
الجسم {
الخط الأسرة: أريال ، بلا شريف;
}
في هذه الحالة ، نحدد استخدام الخط أريال إذا كان متوفرا على جهاز الكمبيوتر الخاص بالمستخدم. خلاف ذلك ، سيتم استخدام الخط بلا الرقيق المحدد بعد الفاصلة.
3. تثبيت الخطوط المخصصة
بالإضافة إلى خطوط الويب وخطوط النظام ، يمكنك استخدام الخطوط المخصصة عن طريق تحميل ملفاتها إلى الخادم الخاص بك وتحديد مساراتها في كس.