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