كيفية تغيير حجم الخط باستخدام كس: دليل المبتدئين

يعد تغيير حجم الخط على صفحة الويب إحدى المهام الرئيسية لمطور الويب. يمكن أن يجعل النص أكثر قابلية للقراءة ، بالإضافة إلى المساعدة في إبراز العناصر المهمة للمحتوى. في هذا الدليل ، وسوف ننظر في الطرق الرئيسية لتغيير حجم الخط باستخدام كس وتبادل بعض النصائح المفيدة للمبتدئين.

كن حذرا عند استخدام وحدات القياس المطلقة ، حيث لا يتم قياسها حسب حجم الشاشة أو إعدادات المستخدم.

يعد استخدام وحدات القياس النسبية مفيدا بشكل خاص عند إنشاء صفحات ويب سريعة الاستجابة تحتاج إلى التوسع عبر الأجهزة.

نصيحة: عند استخدام وحدات القياس النسبية ، يوصى بتجنب استخدام وحدات البكسل (بكسل) لتعيين حجم الخط. بدلا من ذلك ، استخدم إم أو ريم لتوفير تجربة أكثر مرونة وسهلة الاستخدام.

1. أساسيات تغيير حجم الخط في المغلق
2. تغيير حجم الخط باستخدام القيم المطلقة
3. تغيير حجم الخط باستخدام القيم النسبية
4. تغيير حجم الخط باستخدام الكلمات الرئيسية
5. تطبيق تغييرات حجم الخط على صفحة الويب بأكملها

أساسيات تغيير حجم الخط في المغلق

يمكن أن يؤثر تغيير حجم خط صفحة الويب بشكل كبير على الإدراك البصري للمحتوى ويزيد من سهولة قراءته. في كس ، هناك عدة طرق لتعيين حجم الخط ، وهي تحديد قيمة معينة بالبكسل أو النسب المئوية أو وحدات القياس الأخرى.

في تركيبة مع قيمة تشير إلى عدد البكسل. على سبيل المثال:

• - سيقوم هذا الرمز بتعيين حجم الخط إلى 14 بكسل.
• - سيكون حجم الخط 16 بكسل.

ومع ذلك ، قد يحد استخدام وحدات البكسل من قدرة المستخدم على تغيير حجم الخط على صفحة الويب من خلال إعدادات المتصفح. وحدات القياس النسبية ، مثل النسب المئوية أو م ، يمكن استخدامها لإنشاء واجهة أكثر مرونة.

يمكن أيضا أن تأخذ القيم كنسبة مئوية. على سبيل المثال:

• - سيكون هذا هو حجم الخط الافتراضي.
• - ستزيد الخط بنسبة 50 ٪ مقارنة بحجم الخط الافتراضي.
• - سيكون الخط 25٪ من حجم الخط الافتراضي.

وبالإضافة إلى ذلك ، واحدة من أكثر الطرق مرونة لتعيين حجم الخط هو استخدام م. يتم تحديد قيمة م نسبة إلى حجم الخط من العنصر الأصل. على سبيل المثال:

• - سيكون هذا هو حجم الخط الافتراضي.
• - سيتم زيادة حجم الخط بمقدار 1.5 مرة مقارنة بحجم خط الوالد.
• - سيكون الخط 80٪ من حجم خط الوالد.

يعتمد اختيار كيفية تعيين حجم الخط على الموقف المحدد ومتطلبات تصميم صفحة الويب.

تغيير حجم الخط باستخدام القيم المطلقة

على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل ، استخدم قاعدة كس التالية:

حجم الخط: 16 بكسل;

إذا كنت تريد تعيين حجم الخط بالنسبة إلى حجم العنصر الأصل ، فاستخدم النسب المئوية. على سبيل المثال ، لتعيين حجم الخط إلى 80٪ من حجم العنصر الأصل ، استخدم قاعدة كس التالية:

/ * رمز المغلق */

• }

يرجى ملاحظة أنه إذا قمت بتعيين حجم الخط باستخدام القيم المطلقة ، فسيتم إصلاحه ولن يتم قياسه عند تغيير حجم نافذة المتصفح أو الجهاز. يمكن أن يؤدي ذلك إلى نتائج غير مرغوب فيها على الأجهزة المحمولة أو الشاشات عالية الدقة.

تغيير حجم الخط باستخدام القيم النسبية

فيما يلي بعض قيم حجم الخط النسبية الأكثر استخداما:

: هذه قيمة حجم الخط تساوي حجم خط العنصر الأصل. على سبيل المثال ، إذا كان للعنصر الأصل حجم خط يبلغ 16 بكسل ، فإن تعيين حجم الخط على 2 م سيتوافق مع 32 بكسل.

ريم

: هذه هي قيمة حجم الخط ، والتي تساوي حجم خط العنصر الجذر (عادة عنصر

). على عكس

م القيمة

الوصف

من الصغيرة

حجم خط أصغر افتراضيا.

متوسطة

متوسط حجم الخط الافتراضي.

س-صغير

حجم خط كبير جدا.

كبير

حجم الخط: كبير;

سيؤدي هذا الرمز إلى تغيير حجم الخط إلى حجم أكبر.

يعتبر استخدام الكلمات الرئيسية لتغيير حجم الخط ممارسة جيدة ، حيث يقومون بتعيين حجم الخط الذي يتناسب جيدا مع بقية العناصر على صفحة الويب ويضمن سهولة القراءة المناسبة.

حجم الخط

*

. يحدد هذا المحدد جميع العناصر الموجودة على الصفحة ويسمح لك بتطبيق نفس النمط عليها.