28. حجم الخط والقياس (font-size)

تتحكم خاصية font-size في حجم النص داخل العنصر. اختيار الوحدات الصحيحة أمر بالغ الأهمية لإمكانية الوصول.

الممارسة الموصى بها: rem لحجم الخط

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

css /* حجم الخط الأساسي (اختياري، لكنه ممارسة جيدة) / html { font-size: 100%; / الافتراضي عادة 16px */ }

/* 1.5 مرة حجم الخط الجذري (16px * 1.5 = 24px) */ h1 { font-size: 1.5rem; }

/* حجم نص الجسم القياسي */ p { font-size: 1rem; }

الكلمات المحجوزة النسبية

يقدم CSS أيضاً كلمات محجوزة للتحجيم النسبي، وهي مفيدة غالباً لضبط أحجام النصوص بالنسبة للحاوية الأب:

• larger
• smaller
• xx-small إلى xx-large

css .caption { /* حجم الخط نسبي لحجم خط العنصر الأب */ font-size: smaller; }

حجم الخط المتجاوب

لجعل النص يتوسع بشكل جميل مع منفذ العرض، يمكنك استخدام vw أو دمج الوحدات باستخدام دالة clamp() (سنتناولها لاحقاً)، ولكن بالنسبة للتحجيم البسيط، فإن rem هو الأساس.