CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

? 1. font-family

Inatumika kuchagua aina ya fonti ya maandishi.

p {
  font-family: Arial, sans-serif;
}

• Unashauriwa kuandika fonti zaidi ya moja, ya kwanza ikiwa unayoitaka zaidi, nyingine kama backup.

• Generic families: serif, sans-serif, monospace, cursive, fantasy

? 2. font-size

Inadhibiti ukubwa wa maandishi.

h1 {
  font-size: 30px;
}

• Unaweza kutumia px, em, rem, %, n.k.

• Mfano: font-size: 1.5em;

? 3. font-weight

Inaonyesha unene wa maandishi (boldness).

strong {
  font-weight: bold;
}

• Vingine: normal, lighter, 100 hadi 900

? 4. font-style

Inatumika kubadilisha mtindo wa maandishi, kwa mfano italiki.

em {
  font-style: italic;
}

Chaguzi:

• normal

• italic

• oblique

? 5. line-height

Inadhibiti nafasi kati ya mstari na mstari (msitari mmoja hadi mwingine).

p {
  line-height: 1.6;
}

Inasaidia maandishi yasibane sana au kuwa na nafasi nzuri ya kusomeka.

? 6. text-transform

Inatumika kubadilisha herufi kuwa za juu au ndogo.

p {
  text-transform: uppercase;
}

Chaguzi:

• uppercase – herufi kubwa zote

• lowercase – herufi ndogo zote

• capitalize – kila neno linaanza na herufi kubwa

? 7. font (shorthand)

Unaweza kutumia shorthand kubeba font-style, font-weight, font-size, na font-family kwa pamoja.

p {
  font: italic bold 18px Verdana, sans-serif;
}

✅ Muhtasari

• font-family huamua muonekano wa maandishi

• font-size, font-weight, font-style, na line-height hutumika kufanya maandishi yasomeke vizuri

• Tumia shorthand kwa kupunguza urefu wa code

? Maswali ya Kujitathmini

1. Property ipi hutumika kuchagua aina ya fonti?
   a) font-name
   b) font-type
   c) font-family
   d) font-face

2. Ili kuweka maandishi kuwa bold, unatumia ipi?
   a) font-size
   b) font-style
   c) font-weight
   d) font-transform

3. font-style: italic; inaathiri nini?
   a) Inafanya herufi kuwa kubwa
   b) Inageuza herufi kuwa ya mviringo
   c) Inaweka maandishi kuwa ya mwinamo
   d) Inabadilisha nafasi ya mstari

4. Ukitaka kuandika maneno kwa herufi kubwa zote, utatumia ipi?
   a) text-style: big;
   b) text-transform: uppercase;
   c) font-case: capital;
   d) text-case: upper;

5. Katika shorthand ya font, ipi kati ya hizi si lazima?
   a) font-family
   b) font-style
   c) font-weight
   d) font-size