يعد شريط التنقل عنصرا مهما في موقع الويب الذي يساعد الزوار على التنقل عبر الصفحة والعثور على المعلومات التي يحتاجون إليها. في بعض الأحيان ، لجعل تصميم شريط التنقل فريدا وجذابا ، تحتاج إلى تغيير الخط. في دليل المبتدئين المفصل هذا ، سنخبرك بكيفية تغيير الخط بسهولة في شريط التنقل.
يمكن أن يؤثر اختيارك للخط في شريط التنقل بشكل كبير على المظهر العام للموقع. يمكن للخط المناسب أن يضيف الاحتراف والأناقة ، ويمكن أن يؤدي الاختيار غير المناسب إلى جعل الموقع غير جذاب ويصعب قراءته. لذلك ، من المهم استكشاف الخيارات المختلفة واختيار الخط المناسب لشريط التنقل.
أولا ، حدد الخط الذي تريد استخدامه. يمكنك اختيار واحد من الخطوط على شبكة الإنترنت المتاحة مثل أريال ، فيردانا أو تايمز نيو رومان ، أو تحميل خط من اختيارك. عندما كنت قد قررت على الخط ، وسوف تحتاج إلى رمز كس المناسب لتطبيقه على شريط التنقل.
مثال رمز المغلق:
.لوحة التنقل {
الخط الأسرة: "أريال" ، بلا الرقيق;
وزن الخط: غامق;
حجم الخط: 18 بكسل;
}
في هذا المثال ، استخدمنا فئة " لوحة التنقل "لعنصر شريط التنقل وطبقنا الخط الأريال باستخدام خاصية" عائلة الخط". لاحظنا أيضا أن الخط يجب أن يكون غامقا باستخدام خاصية " وزن الخط "وتعيين حجم الخط إلى 18 بكسل باستخدام خاصية" حجم الخط". يمكنك تغيير هذه القيم وفقا لرغباتك.
- اختيار الخط المناسب
- تغيير الخط في المغلق
- إضافة خط إلى ترميز هتمل
- ميزات شاشة الجوال
- الاختبار والتكوين
اختيار الخط المناسب
عند اختيار خط لشريط التنقل ، من المهم مراعاة عدة عوامل لضمان سهولة القراءة والانطباع المرئي للمستخدمين.
1. سهولة القراءة: المعيار الرئيسي لاختيار الخط هو سهولة قراءته. اختر الخطوط التي يسهل قراءتها بأحجام صغيرة ولها حدود واضحة للأحرف. فمن الأفضل استخدام الخطوط بلا الرقيق أو مع عدد قليل من الرقيق ، لأنها أسهل في الإدراك.
2. النمط: يجب أن يتطابق الخط مع نمط موقع الويب الخاص بك. إذا كان لديك تصميم أضيق الحدود ، فإن الخطوط البسيطة والنظيفة مناسبة. إذا كان موقعك يحتوي على سمة رائعة ، فيمكنك استخدام الخطوط ذات العناصر الساطعة وغير العادية.
3. التوافق: تأكد من أن الخط الذي حددته متوافق مع المتصفحات والأجهزة المختلفة. قد لا تعرض بعض الخطوط بالطريقة التي تقصدها ، اعتمادا على إعدادات المتصفح وقدراته.
4. الحجم: اختر خطا يبدو جيدا على شريط التنقل. حاول تعيين خط بقيمة صغيرة الحجم وتحقق من شكله. قم بتغيير حجم الخط حتى تحقق النتيجة المثلى.
5. الاتساق: إذا كنت قد استخدمت بالفعل خطا معينا على أجزاء أخرى من موقع الويب الخاص بك ، فمن المستحسن استخدام نفس الخط في شريط التنقل. هذا يخلق نظرة موحدة ومتسقة لموقع الويب الخاص بك.
تذكر أن اختيار الخط هو مسألة ذوق ، وما يناسبك قد لا يحبه الآخرون. لذلك ، يوصى باختبار الخيارات المختلفة وجمع تعليقات المستخدمين لاتخاذ قرار نهائي بشأن اختيار خط لشريط التنقل.
تغيير الخط في المغلق
لتغيير الخط ، نستخدم خاصية عائلة الخط. باستخدام هذه الخاصية ، يمكننا تحديد الخط الذي يجب عرضه على صفحة الويب.
على سبيل المثال ، لتعيين الخط أريال ، يمكننا استخدام التعليمات البرمجية التالية:
"'المغلق
الجسم {
الخط الأسرة: أريال ، بلا الرقيق;
}
«`
هنا نحدد أن الخط للمستند بأكمله يجب أن يكون أريال. إذا كان جهاز الكمبيوتر الخاص بالمستخدم لا يدعم أريال ، ثم سيتم استخدام أي خط آخر من عائلة بلا الرقيق.
يمكننا أيضا تعيين خصائص الخط الأخرى ، مثل حجم الخط ونمط الخط وسمك الخط وما إلى ذلك.
على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل ، يمكننا استخدام الكود التالي:
"'المغلق
الجسم {
حجم الخط: 16 بكسل;
}
«`
أيضا ، يمكننا استخدام وحدات قياس أخرى غير وحدات البكسل ، مثل النسب المئوية ، إم أو ريم.
"'المغلق
ص {
حجم الخط: 120%;
}
«`
هنا قمنا بزيادة حجم الخط في الفقرات بنسبة 20 ٪ بالنسبة إلى الحجم الأساسي.
تغيير الخط في كس يوفر مجموعة واسعة من الخيارات لتنسيق النص على صفحة ويب. استخدمه بشكل خلاق وجرب مجموعات مختلفة من الخصائص لإنشاء تصميم فريد لموقعك.
إضافة خط إلى ترميز هتمل
لإضافة خط إلى ترميز هتمل ، سوف تحتاج إلى استخدام أنماط كس. أولا ، تحتاج إلى توصيل الخط بمشروعك. يمكن القيام بذلك باستخدام قاعدة @وجه الخط داخل العلامة
2. توصيل ملف كس خارجي:
- .
- في هذا الملف ، حدد الأنماط لفئة شريط التنقل:
- حجم الخط: 16 بكسل;
وزن الخط: غامق;اللون: # 333;
- داخل العلامة
- رئيس
الفقرة 1
الفقرة 2
الفقرة 3
اختر الطريقة الأكثر ملاءمة لك وقم بتطبيق الأنماط الضرورية على شريط التنقل في موقع الويب الخاص بك.