CSS Academy · درس

حجم الخط ووزنه ونمطه

تحكّم في حجم النص باستخدام font-size، ووزنه باستخدام font-weight، ونمطه باستخدام font-style.

حجم الخط ووزنه ونمطه درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

font-size

تحدّد font-size ارتفاع المحارف. وتقبل أي وحدة قياس للطول. ويُنصح باستخدام rem لإنشاء نصوص قابلة للتوسّع وميسّرة الوصول.

<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>

أحجام الخطوط بالكلمات المفتاحية

يوفّر CSS أيضًا أحجامًا مطلقة بالكلمات المفتاحية (xx-small إلى xx-large) وكلمات مفتاحية نسبية (smaller وlarger) تُحدَّد نسبةً إلى حجم خط العنصر الأب.

<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>

font-weight

تحدّد font-weight سُمك النص. استخدم قيمًا رقمية (من 100 إلى 900 بزيادات مقدارها 100) أو كلمات مفتاحية:

<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>

font-weight والخطوط المتغيرة

مع الخطوط المتغيرة، تكون أي قيمة صحيحة للسُمك (مثل font-weight: 550) صالحة، ويُجري الخط استيفاءً بين المحاور المحدّدة. وهذا يوفّر تحكمًا دقيقًا في تنسيق النصوص.

font-style

تتحكم font-style في عرض النص المائل والمائل بزاوية:

<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>

font-variant

تتيح font-variant ميزات تنسيق النصوص مثل الأحرف الصغيرة:

<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>

اختصار font

يجمع الاختصار font خصائص النمط، والتنوّع، والسُمك، والحجم، وارتفاع السطر، والعائلة:

<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>

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

استخدم clamp() لإنشاء نصوص مرنة يتغيّر حجمها بسلاسة بين حد أدنى وحد أقصى:

<h1>Resize the window &mdash; this heading scales fluidly.</h1>

line-height لتحسين قابلية القراءة

تحدّد line-height المسافة الرأسية بين الأسطر. وتُوصى القيمة غير المرفقة بوحدة (مثل 1.5) — إذ تتدرّج تلقائيًا مع حجم خط العناصر الفرعية.

<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>

letter-spacing وword-spacing

تضيف letter-spacing مسافة بين المحارف، بينما تضيف word-spacing مسافة بين الكلمات. استخدم وحدات em كي تتدرّج هذه المسافات مع حجم الخط.

<h2 class="heading">Spaced Out Heading Text</h2>

تحديد حجم خط ميسّر الوصول

لا تضبط font-size بوحدة px مطلقًا على العنصر html أو body. فهذا يتجاوز تفضيل المستخدم لحجم الخط الذي يحدّده المتصفح. استخدم بدلًا من ذلك وحدات rem المستندة إلى الحجم الافتراضي للمتصفح.

تحقق سريع

ما القيمة الرقمية لـ font-weight المكافئة للكلمة المفتاحية bold؟

خلاصة

استخدم rem مع font-size لاحترام تفضيلات المستخدم. تقبل font-weight قيمًا من 100 إلى 900 أو كلمات مفتاحية. يجمع الاختصار font عدة خصائص. استخدم clamp() لإنشاء نصوص مرنة، واستخدم line-height غير المرفق بوحدة للحفاظ على تباعد متسق.

الأسئلة الشائعة

هل درس «حجم الخط ووزنه ونمطه» مجاني؟

نعم — نص درس «حجم الخط ووزنه ونمطه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «حجم الخط ووزنه ونمطه»؟

تحكّم في حجم النص باستخدام font-size، ووزنه باستخدام font-weight، ونمطه باستخدام font-style. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «حجم الخط ووزنه ونمطه»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy