Sintaksa font-porodične svojine
Tipografski dizajn je kritično važan komad uspešnog dizajna web sajta. Kreiranje sajtova sa tekstom koji je jednostavan za čitanje i koji izgleda odlično su ciljevi svakog profesionalca za web dizajn. Da biste to postigli, moraćete biti u mogućnosti da podesite specifične fontove koje želite koristiti na svojim web stranicama. Da biste naveli font ili porodicu fontova na Web dokumentima, koristićete svojstvo font-family style u CSS-u.
Najjednostavniji font-porodični stil koji biste mogli da koristite bi uključivao samo jednu porodicu fontova:
p {font-family: Arial; }Ako ste ovaj stil primenili na stranicu, svi paragrafi bi bili prikazani u porodici fontova "Arial". Ovo je odlično i pošto je "Arial" poznat kao "web-siguran font", što znači da će većina (ako ne i svi) računari instalirati, lako ćete se odmoriti saznanjem da će se vaša stranica prikazati u predvidjenom fontu .
Šta se dešava ako font koji izaberete ne može da se pronađe? Na primjer, ako ne koristite "web sigurni font" na stranici, šta korisnikski agent radi ako nemate taj font? Pravili su zamenu.
To može dovesti do nekih vrlo smešnih stranica. Jednom sam otišao na stranicu na kojoj je moj računar prikazao u potpunosti u "Wingdings" (ikona) jer moj kompjuter nije imao font koji je programer odredio, a moj pregledač je napravio vrlo loš izbor u kojem fontu bi koristite kao zamenu. Stranica je bila potpuno nečitljiva za mene! Ovde se stavlja u stack font.
Odvojene porodice višestrukih fontova sa komandom u stacku fontova
"Font stack" je lista fontova koje želite da vaša stranica koristi. Postavili biste fontove po redosledu vašeg izbora i odvojili svaku komandom. Ako u pregledaču nema prve porodice fontova na listi, pokušaće se druga, a zatim treća i tako dalje dok ne pronađe onu koju ima na sistemu.
font-family: Pussycat, Algerian, Broadway;U prethodnom primeru, pretraživač će prvo potražiti font "Pussycat", a zatim "Alžir" i "Broadway" ako nijedan drugi font nije pronađen. To vam daje više šanse da će se koristiti bar jedan od izabranih fontova. To nije savršeno, zbog čega imamo još više što možemo dodati našem stacku fontova (pročitajte dalje!).
Koristite Generic Fonts Last
Dakle, možete napraviti stack font s listom fontova i još uvijek nijedan od njih ne može pronaći pretraživač. Očigledno ne želite da se vaša stranica pokaže nečitljivim ako pregledač napravi loš izbor zamene. Na sreću CSS ima i rešenje za ovo: generički fontovi .
Uvek morate završiti listu fontova (čak i ako je lista porodičnih ili samo zaštićenih fontova na mreži) sa generičkim fontom. Postoji pet koje možete koristiti:
- cursive
- fantazija
- monospace
- sans-serif
- serif
Dva navedena primera mogu se promijeniti na:
font-family: Arial, sans-serif; font-family: Pussycat, Algerian, Broadway, fantazija;Neki fontovi porodičnih imena su dva ili više reči
Ako je porodica fontova koju želite da koristite više od jedne reči, onda bi trebalo da ga okružite dvostrukim oznakama. Iako neki pregledači mogu čitati fontove porodice bez navodnika, možda postoje problemi ako je prespojni prostor kondenzovan ili zanemaren.
font-family: "Times New Roman", serif;U ovom primjeru možete vidjeti da je ime fonta "Times New Roman", što je više riječi, zatvoreno u citate. Ovo govori pregledaču da su sve tri ove reči deo tog fonta, za razliku od tri različita fonta sa jednim rečima.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 12/2/16