البرنامج التعليمي لحجم الخط في CSS - كيفية تغيير حجم النص في HTML

استخدم font-sizeخاصية CSS لتحديد حجم النص الخاص بك.

.container { font-size: 33px; } 

تأخذ هذه الخاصية عدة أنواع من القيم:

  • الكلمات الرئيسية (الكلمات الرئيسية ذات الحجم المطلق والحجم النسبي) ،
  • الطول (مثل وحدات البكسل (بكسل) ووحدات em) ، و
  • النسب المئوية.
.container { font-size: xx-large; } 

السؤال هو: أي نوع من القيمة يجب أن تختار ولماذا؟

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

قيم الكلمات الرئيسية

هناك نوعان من القيم الكلمات الرئيسية التي يمكنك استخدامها مع حجم الخط: absolute-sizeو relative-sizeالكلمات الرئيسية. لنبدأ بالمطلق.

الكلمات الرئيسية ذات الحجم المطلق

يستخدم الكود أدناه الكلمة الأساسية ذات الحجم المطلق لتغيير smallحجم نص HTML.

.childElement { font-size: small; } 

هناك المزيد من خيارات الكلمات الرئيسية ذات الحجم المطلق للاختيار من بينها:

  • xx- صغير
  • x- صغير
  • صغير
  • متوسط
  • كبير
  • x-كبير
  • xx- كبير
  • xxx- كبيرة

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

الكلمات الرئيسية ذات الحجم النسبي

الكلمات الرئيسية ذات الحجم النسبي هي خيار آخر للكلمات الرئيسية يجب مراعاته. لديك اثنان للاختيار من بينها: smallerو larger.

.parentElement { font-size: smaller; } 

حجم خط العنصر الذي يحتوي على كلمة أساسية ذات حجم نسبي نسبي - أكبر أو أصغر - لحجم الخط الأصل.

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

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

قيم الطول

font-sizeيقبل عدة قيم طول مختلفة. سنستكشف ثلاثة منها: وحدات البكسل (px) ووحدات em و rem. على الرغم من اختيارك ، يجب أن تكون قيمة الطول التي تستخدمها موجبة.

.parentElement { font-size: 60px; } 

بكسل

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

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

لاحظ أن العناصر الفرعية تستخدم pixelsولها نفس حجم الخط في نموذج التعليمات البرمجية أعلاه.

م

بينما يمكنك التفكير في وحدات البكسل على أنها ثابتة ، فكر في قيم em كمتغير.

ذلك لأن قيم em هي وحدة طول نسبية. حجم الخط عنصر يستخدم قيمة م هو النسبي لحجم الخط من الأم.  

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

دعونا نجعل هذه الفكرة ملموسة.

لنفترض أن العنصر الرئيسي مضبوط على 30 بكسل وأن العنصر الفرعي مضبوط على 2em. بعد ذلك ، يكون حجم الخط المعروض للعنصر الفرعي 60 بكسل (2 × 30 بكسل = 60 بكسل). يمكنك رؤية هذا السيناريو في الكود أدناه.

قد تكون قيم em إشكالية بسبب تأثيرها المركب ، كما هو موضح في المثال التالي.

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

REMs

أدخل قيم rem ، التي تم إنشاؤها للتعامل مع المشكلة المركبة لـ ems.

تذكر أن قيم em مرتبطة بالعنصر الأصل. في المقابل ، ترتبط قيم rem بحجم خط عنصر الجذر (html).  

هذا يعني أنه يمكنك تطبيق قيمة rem على عنصر ، ولن تتأثر بحجم خط الأصل. هذا يتجنب التأثير المركب الذي شهدناه أعلاه.

يستخدم هذا المثال font-sizeالخاصية ذات القيمة rem.

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

النسب المئوية

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

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

هنا مثال.

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

أكتب عن تعلم البرمجة ، وأفضل الطرق للقيام بذلك على موقع amymhaddad.com. أناأيضاسقسقة حول البرمجة، والتعلم، والإنتاجية: amymhaddad.