يمكن أن يؤثر تغيير نوع خط صفحة الويب بشكل كبير على مظهرها وتصور المستخدم. المغلق (أوراق الأنماط المتتالية) يوفر خيارات إدارة الخط المختلفة ، بما في ذلك اختيار أنواع الخطوط المختلفة ، والأحجام ، والمحارف ، وأكثر من ذلك.
لتغيير نوع خط صفحة الويب ، تحتاج أولا إلى تحديد مجموعات الخطوط المطلوبة. هناك عدة طرق للقيام بذلك: يمكنك استخدام الخطوط المحددة مسبقا من المكتبات مثل خطوط جوجل ، أو يمكنك تحميل الخطوط الخاصة بك إلى الخادم واستخدامها.
بعد تحديد عائلات الخطوط ، يمكنك تحديدها في ملف كس باستخدام خاصية عائلة الخط. تتيح لك هذه الخاصية تحديد عائلة خط واحدة أو أكثر ، وفصلها بفواصل. إذا لم يتمكن المتصفح من العثور على أول خط محدد ، فسيحاول استخدام الخط التالي ، وهكذا. يتيح لك ذلك تثبيت خطوط بديلة لأنظمة التشغيل والمتصفحات المختلفة لتوفير دعم أوسع.
إذا كنت بحاجة إلى تحديد نوع خط معين ، فيمكنك استخدام خاصية نمط الخط. يمكنك استخدامه لتعيين خطوط مائلة أو مائلة أو عادية. يمكنك أيضا استخدام خاصية وزن الخط لتحديد جرأة النص: عادي للخط العادي ، غامق للخط الغامق ، أو قيمة رقمية ، على سبيل المثال ، 700 أو 800 ، لتعيين الخط الغامق.
- كيفية اختيار نوع الخط المغلق
- تحديد نوع الخط
- أنواع مختلفة من الخطوط في المغلق
- إعدادات الخط في المغلق
- استخدام خاصية عائلة الخط
- ربط الخطوط الخارجية باستخدام @الخط الوجه
كيفية اختيار نوع الخط المغلق
الخطوة 1: حدد نوع الخط الذي تريد استخدامه في تصميم الويب الخاص بك. يمكنك الاختيار من بين أنواع الخطوط المختلفة مثل الخطوط بلا الرقيق ، الخطوط للطباعة ، أو الخطوط أحادية المسافة.
الخطوة 2: بعد أن تقرر نوع الخط ، ابحث عن عائلة الخطوط المناسبة أو الخط المحدد الذي تريد استخدامه على موقعك. هناك العديد من الموارد حيث يمكنك العثور على الخطوط المجانية أو المدفوعة ، مثل جوجل الخطوط ، أدوبي الخطوط أو فونتسكيرل.
الخطوة 3: قم بتوصيل الخط المحدد بموقعك على الويب. هناك طرق مختلفة لربط الخطوط المغلق ، مثل استخدام @الخط الوجه أو ربط الخطوط من مصادر خارجية.
الخطوة 4: حدد أين وكيف ستستخدم هذا الخط على موقعك. يمكنك تطبيقه على العناوين أو نص الفقرة أو استخدامه في عناصر التصميم الأخرى.
الخطوة 5: استخدم خصائص وقيم كس الصحيحة لتغيير نوع الخط. يمكنك استخدام خاصية عائلة الخط لتحديد خط معين أو عائلة خطوط. على سبيل المثال ، يمكنك استخدام التعليمات البرمجية كس التالية لتطبيق الخط أريال على الفقرات:
الخطوة 6: تحقق من كيفية عرض الخط المحدد على موقع الويب الخاص بك. اعرضه في متصفحات وأجهزة مختلفة للتأكد من أن الخط يبدو بالطريقة التي تقصدها.
تأكد من اختيار الخط الذي يناسب المحتوى والتصميم الخاص بك. استخدمه بعناية وتذكر أن الخط يمكن أن يؤثر بشكل كبير على تصور المستخدم لموقعك على الويب.
تحديد نوع الخط
يمكنك استخدام العديد من الخصائص والقيم لتغيير نوع الخط في كس:
| الممتلكات | المعنى | الوصف |
|---|---|---|
| الخط الأسرة | اسم الخط ، عائلة الخط ، نقل النظام | تعيين اسم الخط أو عائلة الخطوط أو خط النظام للعنصر |
| نمط الخط | عادي ، مائل ، مائل | يحدد نمط الخط: منتظم ، مائل أو مائل |
| الخط الوزن | عادي ، جريئة ، أكثر جرأة ، أخف وزنا ، قيمة رقمية | يحدد تشبع الخط: العادية ، جريئة ، جريئة ، أكثر من الدهون أو أقل من الدهون ، أو قيمة رقمية 100-900 |
| حجم الخط | حجم الخط ، النسب المئوية ، إم ، ريم، بكسل | يحدد حجم الخط للعنصر |
يسمح لك بتحديد خط معين لعنصر ما. يمكنك تحديد اسم خط مثل" أريال "أو" تايمز نيو رومان "، أو عائلة خطوط مثل" الرقيق "أو" بلا الرقيق "، أو خط نظام مثل" واجهة مستخدم النظام "أو"أحادي المسافة". إذا لم يكن الخط المحدد على جهاز الكمبيوتر الخاص بالمستخدم ، فسيتم استبداله بخط آخر.
يحدد نمط الخط للعنصر. القيم" عادي "و" مائل " تعيين النمط العادي أو المائل ، على التوالي. القيمة" منحرف " يميل الخط إلى اليمين إذا كان النمط المائل غير متوفر.
يحدد تشبع الخط للعنصر. القيم" عادي "و" غامق " تعيين التشبع العادي أو الغامق ، على التوالي. القيم" أكثر جرأة "و" أخف وزنا " زيادة أو نقصان التشبع بالنسبة إلى الإعداد الافتراضي. يمكن أيضا استخدام القيم الرقمية من 100 إلى 900 لمستويات تشبع مختلفة.
يسمح لك بتعيين حجم خط العنصر. يمكن تحديد الحجم في وحدات قياس معينة ، مثل وحدات البكسل (بكسل) أو النسب المئوية ( ٪ ) أو إم أو ريم.
أنواع مختلفة من الخطوط في المغلق
كس لديها العديد من أنواع مختلفة من الخطوط التي يمكن استخدامها لتصميم محتوى صفحة ويب. تتضمن بعض أنواع الخطوط الأكثر شيوعا ما يلي:
1. الرقيق هو نوع الخط الكلاسيكي الذي يحتوي على عناصر زخرفية إضافية في نهايات الأحرف. وعادة ما تستخدم للمنشورات المطبوعة وتستخدم للقراءة على المدى الطويل.
2. بلا الرقيق هو نوع خط حديث لا يحتوي على هذه العناصر الزخرفية الإضافية في نهاية الأحرف. عادة ما يتم استخدامها لتصميم الويب ، حيث تعتبر أكثر ملاءمة للقراءة على الشاشة.
3. الخط أحادي المسافة هو خط تشغل فيه جميع الأحرف نفس المساحة الأفقية. يستخدم هذا النوع من الخطوط عادة لعرض التعليمات البرمجية أو العناصر الأخرى أحادية المسافة.
4. مخطوطة هو نوع من الخط الذي يحاكي أسلوب الكتابة بخط اليد. وعادة ما تستخدم لخلق تأثير التفرد والفردية في النص.
5. الخيال هو نوع من الخطوط التي لها مظهر رائع أو زخرفي. يتم استخدامها عادة للتأثيرات الخاصة أو العناوين حيث يكون مظهر النص ذا أهمية كبيرة.
إعدادات الخط في المغلق
تحدد خاصية عائلة الخط نوع الخط الذي سيتم استخدامه لعرض النص. يمكنك اختيار أحد الخطوط المتاحة أو تثبيت الخطوط الخاصة بك. على سبيل المثال ، لاستخدام الخط أريال ، يمكنك تحديد قيمة "أريال ، بلا الرقيق". إذا كان الخط أريال غير متوفر ، فإن المتصفح استخدام الخط بلا الرقيق.
تحدد خاصية حجم الخط حجم الخط. يمكنك تحديد القيمة بالبكسل أو النسب المئوية أو وحدات القياس الأخرى المتاحة. على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل ، يمكنك تحديد القيمة "16 بكسل".
تسمح لك خاصية اللون بتعيين لون الخط. يمكنك تحديد أحد الألوان المحددة مسبقا باستخدام اسم اللون (على سبيل المثال ، " أحمر "للأحمر) ، أو تحديد قيمة اللون باستخدام رمز عرافة أو رغب (على سبيل المثال ، "#فف0000 " للأحمر).
تحدد خاصية نمط الخط نمط الخط. يمكنك تعيين القيمة إلى "مائل" لخط مائل أو "مائل" لخط مائل أو "عادي" لخط عادي.
تسمح لك خاصية وزن الخط بتعيين تشبع الخط. يمكنك تحديد القيمة " غامق "لخط غامق أو" عادي " لخط عادي أو قيمة رقمية في النطاق من 100 إلى 900.
على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل واللون الأحمر والنمط المائل والتشبع العادي ، يمكنك استخدام الكود التالي:
ص {
الخط الأسرة: أريال ، بلا الرقيق;
حجم الخط: 16 بكسل;
اللون: أحمر;
نمط الخط: مائل;
الخط الوزن: عادي;
الآن بعد أن عرفت الخصائص الأساسية لتخصيص الخط في كس ، يمكنك إنشاء مظهر إبداعي وفريد للنص على موقع الويب الخاص بك.
الخاصية الخط الأسرة في كس يسمح لك لتحديد قائمة من الخطوط التي ينبغي استخدامها في المقام الأول لعرض النص على صفحة ويب. إذا كان المتصفح لا يدعم الخط الأول في القائمة ، فسيتم تطبيق الخط التالي وما إلى ذلك.
لتحديد خط ، يمكنك استخدام اسمه أو الاسم المعروض أو الاسم كملف خط. يمكنك أيضا تحديد خطوط متعددة مفصولة بفواصل.
في ما يلي مثال على استخدام خاصية عائلة الخط:
ص {
الخط الأسرة: أريال ، هلفتيكا ، بلا الرقيق;
}
في هذا المثال ، إذا كان المتصفح يدعم الخط أريال ، سيتم استخدامه لعرض النص داخل العلامة
وبالتالي ، يتيح لك استخدام خاصية عائلة الخط التحكم في عرض النص على صفحة الويب وتحديد الخط الأنسب لتصميمك.
ربط الخطوط الخارجية باستخدام @الخط الوجه
لتغيير نوع الخط على صفحة ويب ، يمكنك استخدام مجموعة الخطوط القياسية المتوفرة في المتصفح. ومع ذلك ، إذا لم يتم تضمين الخط المطلوب في هذه المجموعة ، يمكنك توصيل خط خارجي باستخدام قاعدة @الخط الوجه في كس.