يؤثر حجم خط صفحة الويب بشكل كبير على سهولة قراءة المحتوى والإدراك العام للمعلومات. يعد تغيير حجم الخط إحدى الطرق الرئيسية لتصميم صفحة ويب بصريا باستخدام كس.
هناك عدة طرق لتحديد حجم الخط في كس. أبسط هو استخدام وحدات القياس المطلقة ، مثل بكسل (بكسل) أو نقاط (بت). على سبيل المثال ، تعيين قيمة حجم الخط إلى 16 بكسل ؛ يضبط حجم الخط على 16 بكسل. ومع ذلك ، قد يكون استخدام الوحدات المطلقة مشكلة عند تغيير حجم الصفحة ، خاصة على الأجهزة المحمولة.
لإجراء تغييرات أكثر مرونة في حجم الخط ، يوصى باستخدام وحدات قياس نسبية مثل النسب المئوية ( ٪ ) أو م (م) أو إطارات العرض (فولكس فاجن ، ف). على سبيل المثال ، تعيين قيمة حجم الخط إلى 150 ٪ ؛ سيزيد حجم الخط بنسبة 50 ٪ من القيمة المحددة للعنصر الأصلي.
يجب أن يؤخذ في الاعتبار أن استخدام أحجام خطوط صغيرة جدا أو كبيرة جدا يمكن أن يؤثر سلبا على سهولة قراءة وجودة العرض المرئي لصفحة الويب. لذلك ، يوصى باختيار حجم الخط الذي يوفر التوازن الأمثل بين سهولة القراءة والتصميم الجمالي.
- قواعد كس الأساسية لتغيير حجم الخط
- تحديد حجم الخط بالبكسل
- استخدام وحدات القياس المطلقة لحجم الخط
- تطبيق وحدات القياس النسبية لتغيير حجم الخط
قواعد كس الأساسية لتغيير حجم الخط
هناك عدة طرق لتعيين حجم الخط في كس:
1. تحديد قيمة صريحة:
لتعيين حجم خط ثابت لعنصر ما ، يمكنك استخدام خاصية حجم الخط. على سبيل المثال ، لتحديد حجم 12 بكسل ، يمكنك تطبيق القاعدة التالية:
حجم الخط: 12 بكسل;
2. استخدام القيم النسبية:
تسمح لك القيم النسبية بالاستناد إلى حجم الخط الحالي وقياسه وفقا للسياق. على سبيل المثال ، يمكنك استخدام النسب المئوية أو الكلمات الرئيسية النسبية مثل "أصغر" أو "أكبر". أمثلة:
حجم الخط: 150%;
حجم الخط: أكبر;
3. باستخدام م:
قيمة م هو مضاعف ضرب حجم الخط الحالي. على سبيل المثال ، تزيد قيمة 1.5 م حجم الخط بمقدار 1.5 مرة:
حجم الخط: 1.5 م;
4. باستخدام ريم:
تعتمد قيمة الريم على حجم خط عنصر جذر هتمل. على سبيل المثال ، تعني القيمة 1.2 ريم أن حجم الخط سيكون أكبر بمقدار 1.2 مرة من حجم الخط المحدد للعنصر الأصل.:
حجم الخط: 1.2 ريم;
يعد تغيير حجم الخط عاملا مهما في إنشاء تصميم صفحة ويب جذاب وقابل للقراءة. استخدم قواعد كس الأساسية هذه للتحكم في حجم النص وإنشاء واجهة مستخدم ممتعة من الناحية الجمالية.
تحديد حجم الخط بالبكسل
. على سبيل المثال ، لتعيين حجم الخط إلى 14 بكسل:
- ).
- وحدد القيمة بالبكسل. على سبيل المثال:
.
من المهم ملاحظة أنه عند استخدام وحدات البكسل ، سيتم إصلاح حجم الخط ولن يستجيب للتغيرات في حجم نافذة المتصفح أو إعدادات المستخدم. لذلك ، يجب أن تكون حذرا عند استخدام وحدات البكسل لتعيين حجم الخط ، خاصة على الأجهزة المحمولة ، حيث يمكن أن تختلف أحجام الشاشة بشكل كبير.
غالبا ما يعتبر استخدام تحديد حجم الخط بالبكسل طريقة قديمة ، ويوصى بالنظر في طرق بديلة ، مثل استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م.
استخدام وحدات القياس المطلقة لحجم الخط
واحدة من أكثر وحدات القياس المطلقة شيوعا هي البكسل (بكسل). البكسل هو أصغر وحدة تشكل صورة على الشاشة. لذلك ، فإن استخدام وحدات البكسل لتعيين حجم الخط يعطي نتيجة دقيقة ويمكن التنبؤ بها.
| وحدة القياس | الوصف |
|---|---|
| من بكسل | يتم تحديد حجم الخط بالبكسل. على سبيل المثال ، حجم الخط: 16 بكسل; |
| في | يشار إلى حجم الخط بالبوصة. على سبيل المثال ، حجم الخط: 1 بوصة; |
| سم | يشار إلى حجم الخط بالسنتيمتر. على سبيل المثال ، حجم الخط: 2 سم; |
| مم | يشار إلى حجم الخط في ملليمتر. على سبيل المثال ، حجم الخط: 10 مم; |
| حزب العمال | يتم تحديد حجم الخط في النقاط. نقطة واحدة تساوي 1/72 من البوصة. على سبيل المثال ، حجم الخط: 12 نقطة; |
| الكمبيوتر | يشار إلى حجم الخط في البستوني. ذروة واحدة تساوي 12 نقطة. على سبيل المثال ، حجم الخط: 1.5 جهاز كمبيوتر; |
عند استخدام وحدات القياس المطلقة ، سيبدو حجم الخط دائما كما هو بغض النظر عن إعدادات تكبير الصفحة أو تصغيرها. ومع ذلك ، يجب ألا يغيب عن البال أن استخدام حجم خط ثابت يمكن أن يتسبب في مشاكل في إمكانية الوصول للمستخدمين ذوي الإعاقة أو مع خيارات عرض مختلفة.
تطبيق وحدات القياس النسبية لتغيير حجم الخط
عند تصميم صفحة ويب ، من المهم أن تضع في اعتبارك أن حجم الخط يجب أن يكون متكيفا وسهل القراءة على الأجهزة والشاشات المختلفة. يمكن استخدام وحدات القياس النسبية مثل النسب المئوية ( ٪ ) ، إم و ريم لتحقيق هذا الهدف.
تسمح لك وحدات القياس النسبية بتعيين حجم الخط اعتمادا على العنصر الأصلي أو حجم الخط الأساسي في الصفحة. يتيح لك ذلك إنشاء تصميم أكثر مرونة وقابلية للتطوير.
إذا تم تعيين حجم الخط كنسبة مئوية ( ٪ ) ، فسيكون ذلك بالنسبة إلى حجم خط العنصر الأصل. على سبيل المثال ، إذا كان حجم خط العنصر الأصل هو 16 بكسل ، وقمنا بتعيين حجم العنصر الفرعي إلى 200 ٪ ، فسيكون حجم الخط النهائي للعنصر الفرعي 32 بكسل.
وحدات إم و ريم هي نسبة إلى حجم الخط الأساسي. ومع ذلك ، على عكس النسب المئوية ، يمكنهم مراعاة العناصر المتداخلة وتغيير حجم الخط بالنسبة إلى الحجم الأساسي على الصفحة.
تحدد قيمة م حجم الخط بالنسبة إلى العنصر الأصلي. على سبيل المثال ، إذا كان حجم الخط الأساسي في الصفحة هو 16 بكسل ، وقمنا بتعيين حجم خط العنصر الفرعي على 1.5 م ، ثم حجم الخط النهائي للعنصر الفرعي سيكون 24 بكسل.
تحدد قيمة حركة العين السريعة حجم الخط بالنسبة لحجم الخط الأساسي في الصفحة. يتيح لك ذلك تعيين أحجام الخطوط بشكل مستقل عن العناصر المتداخلة. على سبيل المثال ، إذا كان حجم الخط الأساسي في الصفحة هو 16 بكسل ، وقمنا بتعيين حجم خط العنصر الفرعي على 1.5 ريم ، فسيكون حجم الخط النهائي للعنصر الفرعي أيضا 24 بكسل.
يتيح لك استخدام وحدات القياس النسبية لتغيير حجم الخط إنشاء تصميم متكيف يسهل قراءته على الأجهزة والشاشات المختلفة. هذا مهم بشكل خاص عند تطوير إصدارات الأجهزة المحمولة والأجهزة اللوحية لمواقع الويب.