يواجه مطورو الويب باستمرار مهمة اختيار الخط المناسب لموقعهم على الويب. يمكن للخط الفريد أن يحسن بشكل كبير مظهر النص وقابليته للقراءة ، ويعزز الانطباع الجمالي للموقع ويساعد في خلق جو ذي علامة تجارية. ومع ذلك ، يمكن أن يؤدي استخدام الخطوط المعقدة جدا أو الثقيلة إلى تدهور وقت تحميل الصفحة وإزعاج المستخدمين. في مثل هذه الحالات ، يصبح استخدام خطوط كس أداة أساسية لمطوري الويب.
تسمح خطوط كس للمطورين بالتحكم في تصميم النص باستخدام أنماط وإعدادات مختلفة مثل الحجم والتشبع وتباعد الأسطر. تسمح لك بتحديد خط من خطوط النظام المتاحة أو توصيل خطوط خاصة مخزنة على الخادم. الخطوط المغلق يمكن تطبيقها على الكلمات الفردية ، والفقرات ، أو حتى كتل كاملة من النص.
من المهم ملاحظة أن استخدام خطوط كس يتطلب نهجا دقيقا للاختيار والتخصيص. قبل استخدام الخط ، تحتاج إلى التأكد من أنه متوافق مع جميع الأنظمة الأساسية والمتصفحات التي سيتم عرض الموقع عليها. يجب أيضا أن تضع في اعتبارك خفة الخط وقابليته للقراءة حتى يمكن قراءة النص دون مشاكل. بالإضافة إلى ذلك ، يجب دمج تصميم الموقع بشكل متناغم مع الخط المحدد ، حتى لا يخلق الارتباك ولا ينتهك النمط الموحد.
في هذه المقالة ، سنلقي نظرة على بعض النصائح والأمثلة لاستخدام خطوط كس على موقع ويب. سنتحدث عن طرق مختلفة لتوصيل الخطوط وضبط معلماتها والنظر في استخدام تأثيرات إضافية للنص. سوف توصياتنا تساعدك على جعل موقع الويب الخاص بك أكثر جاذبية والمهنية مع الحد الأدنى من الجهد والتكلفة.
- الاستخدام الصحيح للخطوط المغلق
- أساسيات اختيار الخط
- استخدام أنواع مختلفة من الخطوط
- خيارات تصميم النص والخط
- أمثلة على استخدام خطوط كس على موقع ويب
الاستخدام الصحيح للخطوط المغلق
يمكن أن يؤدي الاستخدام الصحيح للخطوط على موقع الويب إلى تعزيز جاذبيته الجمالية وسهولة قراءة النص بشكل كبير. في كس ، هناك عدة طرق لتحديد الخطوط وتطبيقها على عناصر مختلفة.
. تتيح لك هذه الخاصية تحديد اسم خط واحد أو أكثر لاستخدامه لعنصر معين. على سبيل المثال:
ف { الخط الأسرة: "هلفتيكا نويه" ، أريال ، بلا الرقيق؛}أو
أحادي الفضاء
للتأكد من أن النص لا يزال قابلا للقراءة حتى إذا كان الخط المطلوب غير متوفر.
و
نمط الخط
ص. عادي { الخط الوزن: عادي؛}
ص. بولد { الخط الوزن: جريئة؛}
ص. مائل { نمط الخط: مائل؛}
ص. تحته خط { زخرفة النص: تسطير؛}
- باستخدام هذه الأنماط ، يمكنك تعيين مجموعات مختلفة من الخطوط ومحاربها لعناصر مختلفة على موقع الويب وإنشاء تصميم فريد.
- من المهم أيضا مراعاة أن استخدام العديد من الخطوط المختلفة في نفس الصفحة يمكن أن يعقد إدراك النص ويبطئ تحميل الصفحة. لذلك ، يوصى بالحد من عدد الخطوط المستخدمة واختيارها بناء على أهداف وغايات موقع الويب الخاص بك.
نتيجة لذلك ، سيساعد الاستخدام الصحيح للخطوط على موقع الويب على تحسين انطباعه المرئي ، وجعل النص أكثر قابلية للقراءة وفريدة من نوعها ، مع عدم نسيان مراعاة قيود الترخيص وتحسين تحميل الصفحة.
أساسيات اختيار الخط
سهولة القراءة: يجب أن يكون الخط سهل القراءة وسهل الاستخدام. تجنب الخطوط ذات الزاوية الحادة أو تلك التي تكون رفيعة جدا وغامضة.
النمط: اختر خطا يطابق النمط العام لموقع الويب الخاص بك. على سبيل المثال ، إذا كان موقعك يحتوي على مظهر أكثر رسمية ، فاختر خطا كلاسيكيا مثل تايمز نيو رومان. إذا كان الموقع يحتوي على تصميم حديث وأنيق ، فيمكنك استخدام خطوط أكثر جرأة وحداثة.
التوافق: تأكد من أن الخط الذي تختاره مدعوم من قبل جميع المتصفحات والأجهزة الشائعة. استخدم خطوط النظام القياسية أو خطوط الويب التي يمكنك تحميلها على الخادم الخاص بك.
بالإضافة إلى اختيار الخط ، يمكنك أيضا تعيين أنماط إضافية مثل حجم الخط والخط الغامق ونمط الخط لإنشاء تصميم فريد وجذاب لموقعك على الويب.
باستخدام كس ، يمكنك بسهولة إضافة الخط المحدد إلى موقعك. فقط إضافة رمز كس المناسب ، وتحديد اسم الخط وخصائصه. على سبيل المثال:
الجسم {
الخط الأسرة: "أريال" ، بلا الرقيق;
حجم الخط: 16 بكسل;
الخط الوزن: عادي;
}
في هذا المثال ، نقوم بتعيين الخط الأريال لجميع النصوص على الموقع بحجم 16 بكسل ومحتوى الدهون العادي.
من المهم أن تتذكر أن اختيار الخط هو جانب مهم من تصميم موقع الويب الخاص بك. جرب باستمرار وابحث عن الخط الأنسب للمحتوى الخاص بك.
استخدام أنواع مختلفة من الخطوط
1. الخطوط المضمنة
كس يمكن استخدام الخطوط المضمنة مثل أريال ، تايمز نيو رومان ، أو فيردانا. للقيام بذلك ، يكفي تعيين اسم الخط في خاصية عائلة الخط:
الخط الأسرة: أريال ، بلا الرقيق;
2. الخطوط الخارجية
يمكنك أيضا استخدام الخطوط الخارجية عن طريق تحميلها باستخدام قاعدة @وجه الخط. سوف تحتاج إلى ملف الخط في الشكل.ووف أو .2:
@الخط الوجه {
الخط الأسرة: 'يوركوستومفونت';
سرك: ورل('الخاص بك-مخصص-الخط.ووف 2') شكل ('ووف 2'),
عنوان ورل ('الخط المخصص الخاص بك.وف') شكل ('وف');
}
بعد ذلك ، يمكنك استخدام الخط في كس الخاص بك:الخط الأسرة: 'يوركوستومفونت' ، أريال ، بلا الرقيق;
3. جوجل الخطوط الخطوط
توفر خطوط جوجل مجموعة واسعة من الخطوط عالية الجودة والمجانية التي يمكن استخدامها على موقع الويب الخاص بك. تحتاج فقط إلى توصيل الخط عن طريق إضافة التعليمات البرمجية التالية إلى هتمل الخاص بك:
ثم يمكنك استخدام هذا الخط في كس الخاص بك: