Cashar 4 / 11

Hanaanka Qoraalka iyo Farta

Sida loo maamulo nooca farta, cabbirkeeda, iyo qaababka ay u muuqato.

Casharkaan, waxaan baran doonaa sida loo xakameeyo qaabka qoraalka iyo farta (typography) CSS-ka. Typography-ga wanaagsani wuxuu kor u qaadaa akhrisnaanta iyo quruxda bogga.

1. Nooca Farta (Font Family)

Sifada font-family waxay qeexdaa nooca farta la isticmaalayo.

body {
    font-family: Arial, Helvetica, sans-serif;
}

Waxaa fiican in la isticmaalo stack (liis ah) noocyo faro ah — haddii mid uu maqan yahay, midka xiga ayaa la isticmaalaa.

Noocyada guud (Generic families):

  • serif: Faro leh “cago” — sida Times New Roman.
  • sans-serif: Faro aan lahayn “cago” — sida Arial, Helvetica.
  • monospace: Faro cabbir kasta oo isku mid ah — sida Courier New, JetBrains Mono.

2. Cabbirka Farta (Font Size)

font-size waxay qeexdaa cabbirka qoraalka. Halbeegyada caadiga ah:

h1 {
    font-size: 32px;  /* pixels */
}

p {
    font-size: 1rem;  /* root em — waa cabbirka guud */
}

small {
    font-size: 0.875em;  /* em — waxay ku xirantahay waalidka */
}

Talo: Isticmaal rem marka suurtagal ah — waa mid waafaqsan (responsive).

3. Miisaanka Farta (Font Weight)

font-weight waxay qeexdaa dhumucda xarfaha:

h1 {
    font-weight: bold;   /* same as 700 */
}

p {
    font-weight: normal; /* same as 400 */
}

strong {
    font-weight: 900;    /* ugu dhumuc weyn */
}

Qiimaha wuxuu u dhexeeyaa 100 (khafiif) ilaa 900 (dhumuc weyn).

4. Hanaanka Qoraalka (Text Alignment)

text-align waxay qeexdaa sida qoraalka loo hagaajiyo:

h1 {
    text-align: center;   /* dhex-marnaan */
}

p {
    text-align: left;     /* bidix (caadiga ah) */
}

blockquote {
    text-align: right;    /* midig */
}

.justified {
    text-align: justify;  /* labada dhinac */
}

5. Qaababka Qoraalka oo Dhamaystiran

article {
    font-family: 'Georgia', serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;      /* kala dheeraynta sadarka */
    text-align: left;
    color: #333;
}

Layli (Practice)

  1. Abuur xeer body ah oo isticmaalaya font sans-serif cabbir 16px.
  2. Ka dhig cinwaannada <h1> inay ahaadaan 2.5rem, dhumuc (bold) iyo dhex-marnaan (center).
  3. Ka dhig cutubyada <p> inay leeyihiin kala-dheerayn (line-height) 1.8.
  4. Tijaabi faro kala duwan: serif, sans-serif, monospace.

Sii wadashada: Casharka xigta, waxaan baran doonaa qaabka sanduuqa (the box model)!

Start today · It's free

Ready to learn
something new?

Browse community-written courses on any subject, or share your expertise by contributing on GitHub .

Browse Courses