كيفية زيادة حجم الخط باستخدام كس: طرق وتوصيات بسيطة

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

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

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

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

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

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

1. استخدام وحدات القياس النسبية

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

}

2. باستخدام سمة حجم الخط

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

}

3. استخدام خاصية ضبط حجم الخط

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

}

4. استخدام فئات منفصلة للعناصر

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

ثم ، في مستند هتمل ، قم بتطبيق هذه الفئة على العناصر المطلوبة:

سيكون هذا النص بخط كبير.

5. استخدام استعلامات الوسائط

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

@شاشة الوسائط و (الحد الأدنى للعرض: 768 بكسل) {

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

استخدام الوحدات المطلقة في كس

فيما يلي بعض الوحدات المطلقة الأكثر شيوعا:

بكسل

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

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

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

تغيير حجم الخط عبر الخاصية

حجم الخط

محدد {

سم

) والقيم النسبية (

ريم

).

ص {

حجم الخط: 150%;

}

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