تحديد حجم النص في CSS

تحديد حجم النص في CSS

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

نبدأ على بركة الله

🆎 الحـجـم: 


 

 

لتغيير حجم الكتابة نستعمل خاصية CSS التالية: font-size.

لكـن كيف يتم ذلك؟؟🧩 إممم .. 🤫 هنـاستبدأ الأمور بالتعقيد، بسبب توفر العديد من التقنيات التي تصب في نفس المنحى.

  • لتحديد الحجم بالقيمة المطلقة ( taille absolue) : نستعمل طريقة التحديد بالبكسل أو السنتيمترات أو المليمترات. هذه الطريقة دقيقة للغاية ولكن ينصح باستخدامها فقط إذا كانت ضرورية ، لأنها قد تشير إلى حجم صغير جدًا بالنسبة لبعض القُـرَّاء.
  • لتحديد الحجم النسبي ( taille relative) : وهذا الحجم يتم تحديده بالنسبة المئوية، “em” أو “ex” ، وتتميز هذه التقنية  كونها أكثر مرونة. إنها تتكيف بسهولة أكبر مع الحجم الذي يفضله زوار المواقع. لــنـــرى …..

🎲 الحجم المطلق – Taille absolue :

هذا النوع من الحجم يتطلب مِـنَّا عموماً استخدام البيكسلات Les pixels .

وللحصول على نص يبلغ ارتفاعه 14 بكسل مثلاً ، يجب عليك كتابته بهذا الشكل:

 

في هاته الحالة سيكون حجم الحروف 14 pixels .

حجم الكتابة 14 بيكسيلارتفاع الحرف 14 بيكسيل

الآن جاء وقت وضع الكود  في ملف CSS كالتالي:

 

و النتيجة كما ترى:

 

نتيجة الحجم في css3

تحديد حجم النص في CSS

📌 عليك أن تعلم أنه يمكنك إن أردت تحديد الأحجام بالسنتيمترات أو المليمترات. وذلك ياستبدال “px” بـ “cm” أو “mm”. ولكن لا أنصحك بذلك ! لأن هاته الوحدات تفقد النص جماليته في بعض المتصفحات، و قد لا تتلائم مع بعض الشاشات في كبرها وصغرها.

🎲 القيمة النسبية – Valeur relative:

تبقى هذه الطريقة الملائمة والموصى بها لأن الزوار تجدهم أكثر تكيفاً مع هاته القيمة الحجمية للكتابة. أريد أن أشير إلى أمر مهم و ملحوظ لذا الجميع هو أن القيمة لها إشارات مختلفة تترجم نوعية الحجم تماماً مثل الألوان التي تكتب إمابالأرقام او بالحروف الانجليزية . — المثال :


xx-small = ضغير جداً جداً

x-small = صغير جداً

small = صغير

meduim = متوسط

large = كبير

x-large = كبير جداً

xx-large = ضخم جداً


يمكنك استخدام هاته القيم كتجربة من الآن:

 

 

  • أنظر النتيجة:

 

تحديد حجم النص في CSS

تحديد حجم النص في CSS

أيّيايْ !!! ، لا أدري لماذا هؤلائ المبرمجين يهوون المشاكل و التعقيد ؟
لماذا لا نستعمل طريقة جد سهلة و توفي بالغرض؟ . مثلاً بدل هاته المجموعة من الأسماء المحصورة في 7 قِيَمْ ، يمكننا استعمال أسلوب التكبير و التصغير من خلال القيمة الحجمية “em”.

مثلاً:

  • إذا كتبت 1em ، معناه أن  النص يظهر بحجمه الطبيعي.
  • إذا كنت ترغب في تكبير الكتابة ، يمكنك إدخال قيمة أكبر من 1 ، مثلاً 1.5em.
  • إذا كنت تريد تصغير الكتابة ، فأدخل قيمة أقل من 1 ، مثلاً 0.8em.
تنبيه:
❌ بالنسبة للأعداد العشرية ، يجب عليك وضع نقطة وليس فاصلة. يجب أن تكتب “1.2em” وليس “1,2em”!

هنا مثال:

 

طيِّب ! هل استأنست بهاته الطريقة؟

إن em ليس وحده من ينفرد بهذا العمل ، بل هناك قيمة أخرى لها نفس العمل ، إنها ex وتستعمل النِّسَب المئوية مثل 100% و 120% .

♟ رغم أن الدرس يبدو سهلاً لكنك لن تتمكن منه إذا لم تطبقه مرات عديدة، و كما يقال:

« الشيئ إذا تكرر تقرر »

الرجوع لقائمة المزيد من تنسيقات النصوص 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

73 عدد المشاهدات لهذا المحتوى
Scroll to Top