Tüpograafiline kujundus on eduka veebisaidi kujunduse kriitilise tähtsusega osa. Saitide loomine hõlpsalt loetava ja suurepärase välimusega tekstiga on iga veebidisaini spetsialisti eesmärk. Selle saavutamiseks peate suutma määrata konkreetsed fondid, mida soovite oma veebilehtedel kasutada. Veebidokumentides kirjatüübi või fondiperekonna määramiseks kasutate oma domeenis atribuuti font-family style CSS.
Kõige keerulisem fondiperekonna stiil, mida saaksite kasutada, hõlmaks ainult ühte fondiperekonda:
p {
font-perekond: Arial;
}
Kui rakendate selle stiili lehele, kuvatakse kõik lõigud fontide perekonnas "Arial". See on suurepärane ja kuna "Arial" on tuntud kui "veebis turvaline font", mis tähendab kõige rohkem (kui mitte kõiki) arvutitel oleks see installitud, saate rahulikult teada, et teie leht kuvatakse ettenähtud viisil font.
Mis juhtub, kui teie valitud fonti ei leita? Näiteks kui te ei kasuta lehel veebiturvalist fonti, siis mida teeb kasutajaagent, kui tal seda fonti pole? Nad teevad asenduse.
Selle tulemuseks võib olla mõni lõbusa välimusega leht. Läksin kord lehele, kus mu arvuti kuvas selle täielikult tiibades "Wingdings" (ikoonikomplekt), kuna minu arvutil polnud arendaja määratud font ja minu brauser tegi tohutu valiku, millist fondi ta a-na kasutaks asendamine. Leht oli minu jaoks täiesti loetamatu! Siin tuleb mängu fondivirn.
Eraldage mitu fondiperekonda fondivirnas komaga
"Font stack" on loetelu fontidest, mida soovite oma lehel kasutada. Pange oma fondivalikud oma eelistuste järjekorda ja eraldage need koma abil. Kui brauseril pole loendis esimest fontiperekonda, proovib ta teist ja seejärel kolmandat ja nii edasi, kuni leiab süsteemis oleva.
font-perekond: Pussycat, Alžeeria, Broadway;
Ülaltoodud näites otsib brauser kõigepealt fondi "Pussycat", seejärel "Alžeeria" ja seejärel "Broadway", kui ühtegi teist fonti ei leitud. See annab teile suurema võimaluse, et kasutatakse vähemalt ühte teie valitud fonti. See pole täiuslik, mistõttu on meil veel rohkem, mida saaksime oma fondivirnale lisada (loe edasi!).
Kasuta viimast üldfonte
Nii saate luua fondivirna koos fontide loendiga ja teil pole siiski ühtegi neist, mida brauser ei leia. Kui brauser teeb valiku asendamiseks valesti, ei soovi, et teie leht oleks loetamatu. Õnneks on CSS-il ka sellele lahendus olemas ja seda kutsutakse üldised fondid.
Fondiloend peaksite alati lõppema (isegi kui see on ühe perekonna loend või ainult veebis turvalised fondid) üldfondiga. Saate kasutada viit:
- Kursiivne
- Fantaasia
- Monospace
- Sans-serif
- Serif
Kaks ülaltoodud näidet võidakse muuta järgmisteks:
font-perekond: Arial, sans-serif;
või.
font-perekond: Pussycat, Alžeeria, Broadway, fantaasia;
Mõned fontide perekonnanimed on kaks või enam sõna
Kui fondipere, mida soovite kasutada, on rohkem kui üks sõna, peaksite selle ümbritsema topelt jutumärkidega. Kuigi mõned brauserid saavad fondipere lugeda jutumärkideta, võib tühimiku tihendamisel või eiramisel olla probleeme.
font-family: "Times New Roman", serif;
Selles näites näete, et fondi nimi "Times New Roman", mis on mitmesõnaline, on ümbritsetud jutumärkidega. See ütleb brauserile, et kõik need kolm sõna on selle fondi nime osa, erinevalt kolmest erinevast sõnast koosneva fontiga.