حجم الخط CSS

التوصيات للاختيار

حجم الخط font-size

يُستخدم خاصية التكوين لتعيين حجم النص.

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

لا تُستخدم دائمًا العلامات HTML الصحيحة، مثل <h1> - <h6> للعناوين، و <p> فقط للفقرات.

يمكن أن يكون قيمة font-size حجمًا مطلقًا أو نسبيًا.

  • تعيين حجم النص إلى حجم معين
  • لا يسمح للمستخدمين بتغيير حجم النص في جميع المتصفحات (معدل الوصول منخفض)
  • قياس الحجم المطلق مفيد عندما يكون حجم الفيزيائي للناتج معروف

القياس النسبي:

  • تعيين حجم النص بناءً على العنصر المحيط
  • إتاحة إمكانية تعديل حجم النص للمستخدمين في المتصفح

ملاحظة:إذا لم تكن قد تحدد حجم الخط، فإن حجم النص العادي (مثل الفقرات) هو 16px (16px = 1em).

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

استخدام حجم النص بالبكسل يمكن التحكم في حجم النص بشكل كامل:

مثال

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

جربها بنفسك

نصيحة:إذا كنت تستخدم البكسل، يمكنك لا يزال استخدام أداة التكبير لتعديل حجم الصفحة بأكملها.

تعيين حجم الخط باستخدام الإم

لإتاحة إمكانية تعديل حجم النص للمستخدمين (في قائمة المتصفح)، يستخدم العديد من المطورين وحدة الإم بدلاً من البكسل.

يوصي W3C باستخدام وحدة حجم الإم.

1em يساوي حجم الخط الحالي. حجم النص الافتراضي في المتصفح هو 16px. لذلك، حجم الافتراضي 1em هو 16px.

يمكنك استخدام هذه المعادلة لتحويل حجم البكسل إلى حجم الإم لحساب الحجم: حجم البكسل / 16 = حجم الإم.

مثال

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

جربها بنفسك

في المثال السابق، حجم النص باستخدام وحدة الإم يماثل حجم النص باستخدام وحدة البكسل في المثال السابق. ولكن، إذا تم استخدام حجم الإم، يمكن تعديل حجم النص في جميع المتصفحات.

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

استخدام مجموعة من النسبية والإم

مثال

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

جربها بنفسك

يشتغل كودنا بشكل جيد حاليًا! يتم عرض نفس حجم النص في جميع المتصفحات ويسمح لجميع المتصفحات بتدرج أو تعديل حجم النص!

حجم الخط التفاعلي

يمكنك استخدام vw إعداد حجم النص بواسطة وحدة، تعني "عرض النافذة الإلكترونية" ("viewport width").

بهذا، سيكون حجم النص متدرجًا بناءً على حجم نافذة المتصفح، قم بتغيير حجم نافذة المتصفح لرؤية كيفية تدرج حجم الخط:

مثال

<h1 style="font-size:10vw">مرحبًا بك في العالم</h1>

جربها بنفسك

النافذة الإلكترونية (Viewport) هي حجم نافذة المتصفح. 1vw = 1% من عرض النافذة الإلكترونية. إذا كان عرض النافذة الإلكترونية 50 سم، فإن 1vw = 0.5 سم.