حجم خط CSS
حجم الخط
تحدد الخاصية حجم font-sizeالنص.
تعد القدرة على إدارة حجم النص أمرًا مهمًا في تصميم الويب. ومع ذلك ، لا يجب استخدام تعديلات حجم الخط لجعل الفقرات تبدو كعناوين ، أو تبدو العناوين مثل الفقرات.
استخدم دائمًا علامات HTML المناسبة ، مثل <h1> - <h6> للعناوين و <p> للفقرات.
يمكن أن تكون قيمة حجم الخط حجمًا مطلقًا أو نسبيًا.
الحجم المطلق:
- يضبط النص على حجم محدد
- لا يسمح للمستخدم بتغيير حجم النص في جميع المتصفحات (سيء لأسباب تتعلق بإمكانية الوصول)
- يكون الحجم المطلق مفيدًا عندما يكون الحجم المادي للإخراج معروفًا
الحجم النسبي:
- يضبط الحجم بالنسبة للعناصر المحيطة
- يسمح للمستخدم بتغيير حجم النص في المتصفحات
ملاحظة: إذا لم تحدد حجم الخط ، فإن الحجم الافتراضي للنص العادي ، مثل الفقرات ، هو 16 بكسل (16 بكسل = 1em).
اضبط حجم الخط بالبكسل
يمنحك تعيين حجم النص بالبكسل تحكمًا كاملاً في حجم النص:
مثال
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
نصيحة: إذا كنت تستخدم وحدات البكسل ، فلا يزال بإمكانك استخدام أداة التكبير لتغيير حجم الصفحة بأكملها.
اضبط حجم الخط بـ Em
للسماح للمستخدمين بتغيير حجم النص (في قائمة المتصفح) ، يستخدم العديد من المطورين em بدلاً من البكسل.
1em يساوي حجم الخط الحالي. حجم النص الافتراضي في المستعرضات هو 16 بكسل. لذا ، فإن الحجم الافتراضي لـ 1em هو 16 بكسل.
يمكن حساب الحجم من البكسل إلى em باستخدام هذه الصيغة: pixels / 16 = em
مثال
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 */
}
في المثال أعلاه ، حجم النص في em هو نفس المثال السابق بالبكسل. ومع ذلك ، باستخدام حجم em ، من الممكن ضبط حجم النص في جميع المتصفحات.
لسوء الحظ ، لا تزال هناك مشكلة في الإصدارات القديمة من Internet Explorer. يصبح النص أكبر مما ينبغي عند تكبيره ، وأصغر مما ينبغي عند تصغيره.
استخدم مزيجًا من النسبة المئوية و Em
الحل الذي يعمل في جميع المتصفحات هو تعيين حجم الخط الافتراضي بالنسبة المئوية للعنصر <body>:
مثال
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
كودنا يعمل الآن بشكل رائع! يعرض نفس حجم النص في جميع المتصفحات ، ويسمح لجميع المتصفحات بتكبير النص أو تغيير حجمه!
حجم الخط سريع الاستجابة
يمكن تعيين حجم النص vwبوحدة ، مما يعني "عرض منفذ العرض".
بهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح:
مرحبا بالعالم
قم بتغيير حجم نافذة المتصفح لترى كيف يتغير حجم الخط.
مثال
<h1 style="font-size:10vw">Hello World</h1>
منفذ العرض هو حجم نافذة المتصفح. 1vw = 1٪ من عرض منفذ العرض. إذا كان عرض منفذ العرض 50 سم ، يكون 1vw 0.5 سم.