الانتقال إلى المحتوى الرئيسي

ما هو حجم الخط القياسي: التعريف والإعداد

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

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

كيف يمكنني تحديد حجم الخط القياسي في المتصفح? عادة ما يتم ضبطه على 16 بكسل أو 100٪. يمكن تغيير هذه القيمة في إعدادات المتصفح ، في قسم "إعدادات النص" أو "الخطوط". ومع ذلك ، فإن تغيير حجم الخط القياسي يؤثر فقط على عرض النص في هذا المتصفح المحدد.

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

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

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

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

حجم الخط القياسي في تصميم الويب

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

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

عادة ما يكون حجم الخط القياسي في تصميم الويب 16 بكسل (16 بكسل). هذا هو الحجم الذي تستخدمه معظم المتصفحات افتراضيا.

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

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

تحديد حجم الخط بالبكسل

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

يحتوي هذا النص على حجم خط 14 بكسل.

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

قيمة حجم الخط بوحدات إم و ريم

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

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

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

مثال الاستخدام:

 حجم الخط: 1ريم ؛ / * سيكون حجم الخط 16 بكسل */

}

في هذا المثال ، سيكون حجم الخط في عنصر ص 16 بكسل ، نظرا لأن عنصر هتمل يحتوي على حجم خط 16 بكسل.

وبالتالي ، فإن استخدام وحدات قياس إم و ريم يسمح لك بالتحكم بمرونة في حجم خط صفحة الويب وإنشاء تصميم تكيفي.

كيفية ضبط حجم الخط في كود هتمل

تغيير حجم الخط في رمز هتمل بسيط للغاية. للقيام بذلك ، سوف تحتاج إلى استخدام خاصية كس "حجم الخط".

يمكنك تحديد حجم الخط بالبكسل أو النسب المئوية أو الوحدات المطلقة الأخرى. على سبيل المثال:

الجسم {

ح1 {

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

}

في هذا المثال ، سيكون حجم الخط للنص في نص المستند (عنصر النص) 16 بكسل ، ولرأس المستوى الأول (ح1 عنصر) - 20 بكسل.

2. تعيين القيمة النسبية

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

شعبة {

حجم الخط: 120%;

}

ص {

حجم الخط: 0.8 م;

}

  • في هذا المثال ، سيكون حجم الخط لعنصر ديف 120٪ من حجم الخط في العنصر الأصل ، وبالنسبة للفقرة (العنصر ع) - 0.8 حجم الخط في العنصر الأصل.

  • 3. استخدام الكلمات الرئيسية النسبية
  • يمكنك استخدام الكلمات الرئيسية النسبية لتعيين حجم الخط. على سبيل المثال:

ص {

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