Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
Kwa chaguo-msingi, vivinjari (browsers) hutumia fonts chache kama Arial
, Times New Roman
, Verdana
, n.k. Lakini kama mchoraji wa tovuti, unaweza kutaka kutumia font isiyo ya kawaida ili kuifanya tovuti yako ivutie zaidi.
CSS inaruhusu kutumia fonts hizi kwa njia mbili:
Kutoka nje (Google Fonts)
Kupakia font mwenyewe kwa kutumia @font-face
Google Fonts ni maktaba ya fonts bure inayotolewa na Google. Unaweza kuchagua font yoyote na kuitumia kwenye tovuti yako kwa haraka.
Tembelea https://fonts.google.com
Chagua font unayotaka (mfano: Poppins
)
Nakili link na uweke ndani ya <head>
ya HTML yako:
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Kisha kwenye CSS:
body {
font-family: 'Poppins', sans-serif;
}
Unaruhusiwa kuchanganya fonts: font kuu na font mbadala (fallback).
@font-face
Hii ni njia ya kupakia font kutoka faili ulilohifadhi wewe mwenyewe (local font), hata kama haipo kwenye Google Fonts.
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'MyCustomFont', sans-serif;
}
font-family
: Jina la font utakayotumia kwenye CSS
src
: Njia ya kufikia faili ya font
format()
: Aina ya font (woff
, woff2
, ttf
, nk.)
font-weight
, font-style
: Hiari, huonyesha aina ya font (bold, italic, n.k.)
Kuongeza ubunifu na utambulisho wa chapa
Kuimarisha muonekano wa kitaalamu
Kusaidia accessibility (kupunguza fonts ngumu kusoma)
Fonts kutoka nje huongeza load time (wakati wa kufungua ukurasa)
Unapaswa kuweka fallback fonts (mfano: sans-serif
)
Font zisizo sahihi zinaweza kuvuruga layout
Custom fonts hukuwezesha kuvunja mipaka ya fonts za kawaida na kuleta ubunifu mpya kwenye tovuti. Kutumia Google Fonts ni rahisi, lakini kwa udhibiti zaidi tumia @font-face
kupakia fonts zako mwenyewe.
Kazi ya @font-face
ni ipi?
a) Kupakua script ya JavaScript
b) Kuweka background
c) Kupakia font ya tovuti mwenyewe
d) Kuongeza animation
Google Fonts ni nini?
a) Mfumo wa picha
b) Maktaba ya fonts za bure
c) Server ya Java
d) Code editor
Kwenye @font-face
, src:
inafanya nini?
a) Inaweka jina la font
b) Inaelekeza faili la font
c) Inaweka rangi
d) Inazima font
Kama font haipatikani, nini hufanyika?
a) Hakuna maandishi yataonyeshwa
b) Browser hutumia fallback font
c) Font nyingine huingia kwa default
d) Kivinjari hufunga ukurasa
Jina la font katika font-family
linatumiwa wapi?
a) Kwenye HTML
b) Kwenye script ya JavaScript
c) Kwenye CSS
d) Kwenye URL tu
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...