Lesson 18 / الدرس 18

Fonts / الخطوط

Choose a typeface with font-family, then set its size, weight and style — and always give the browser a fallback.

اختر نوع الخط بـ font-family، ثم اضبط حجمه ووزنه ونمطه — وأعطِ المتصفح خطًا بديلًا دائمًا.

The font-family property picks the typeface. You do not give it one name — you give it a list, in order of preference. The browser walks the list and uses the first font it can actually find on the reader's device.

الخاصية font-family تختار نوع الخط. وأنت لا تعطيها اسمًا واحدًا — بل تعطيها قائمة مرتبة حسب الأفضلية. فيمرّ المتصفح على القائمة ويستخدم أول خط يجده فعلًا على جهاز القارئ.

body {
    font-family: Georgia, "Times New Roman", serif;
}

This asks for Georgia first. If the device does not have it, Times New Roman; if it has neither, whatever serif font it does have. That last entry is the safety net.

اسم الخط الذي يحتوي مسافات يوضع بين علامتي تنصيص: "Times New Roman". أما الاسم المكوّن من كلمة واحدة مثل Georgia فلا يحتاجهما. ويجب أن يكون آخر اسم في القائمة عائلة عامة — serif أو sans-serif أو monospace — لأن كل جهاز يملك واحدًا منها.

Size, weight and style

font-size sets how big the text is — reach for rem, as lesson 14 covered. font-weight sets how heavy it looks, either by keyword (normal, bold) or by number from 100 to 900. And font-style: italic slants it.

الخاصية font-size تحدد حجم النص — واستخدم rem كما رأيت في الدرس 14. والخاصية font-weight تحدد ثقل مظهره، إما بكلمة (normal أو bold) أو برقم من 100 إلى 900. أما font-style: italic فتجعله مائلًا.

h1   { font-size: 2rem; font-weight: 700; }
.note { font-style: italic; font-weight: 300; }

Change the numbers and watch the weight shift. Not every font has every weight — if it only ships regular and bold, asking for 300 gets you the closest one it has.

ذكر اسم الخط لا يضعه على جهاز القارئ. فإن كتبت font-family: Futura ولم يكن الخط مثبتًا لديه، فسيرى شيئًا آخر تمامًا — ولن تعرف أنت بذلك أبدًا، لأنه على جهازك أنت يبدو صحيحًا. ولهذا وُجدت قائمة الخطوط البديلة، ولهذا يعلّمك الدرس 17 كيف ترسل الخط مع صفحتك.

The font shorthand

The font shorthand sets several of these at once, but its order is strict: style, weight, then size, then family — and size and family are both required. Many people find the separate properties easier to read, and there is nothing wrong with using them.

الاختصار font يضبط عدة خصائص منها دفعة واحدة، لكن ترتيبه صارم: النمط ثم الوزن ثم الحجم ثم العائلة — والحجم والعائلة كلاهما مطلوب. ويجد كثير من الناس أن الخصائص المنفصلة أسهل في القراءة، ولا عيب في استخدامها.

p {
    font: italic 600 1.1rem Georgia, serif;
}

The same result as four separate declarations. Leave out the size or the family and the whole shorthand is thrown away — a quiet way to lose your styling.

Property	Example value	What it does
font-family	Georgia, serif	Which typeface, with fallbacks
font-size	1.25rem	How big
font-weight	700	How heavy — 100 to 900, or normal/bold
font-style	italic	Upright or slanted
font	italic 600 1rem Georgia, serif	All of the above, in that exact order

The font properties you will use most often.

Try it live / جرّب بنفسك

<blockquote class="quote">
    <p>A room without books is like a body without a soul.</p>
    <p class="author">Cicero</p>
</blockquote>

.quote {
    /* pick a font-family with fallbacks */
    padding: 1rem;
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why does font-family take a list of names?

لماذا تأخذ font-family قائمة من الأسماء؟

2. Which font name must be written in quotes?

3. What happens if the font shorthand leaves out the size?

ماذا يحدث إذا أغفل الاختصار font الحجم؟

Your task / مهمتك

Style a short book quote. Give the page a font-family with at least two fallbacks ending in a generic family, make the quote itself italic, and set the author's name in a heavier weight than the quote.

صمّم اقتباسًا قصيرًا من كتاب. أعطِ الصفحة font-family فيها بديلان على الأقل وتنتهي بعائلة عامة، واجعل الاقتباس نفسه مائلًا، واجعل اسم المؤلف بوزن أثقل من الاقتباس.

font-family lists at least three names, ending in a generic family font-family تسرد ثلاثة أسماء على الأقل وتنتهي بعائلة عامة
The quote uses font-style: italic الاقتباس يستخدم font-style: italic
The author's name uses a heavier font-weight اسم المؤلف يستخدم font-weight أثقل