Ako ste novi u web dizajnu, možda mislite nešto poput: „Zašto bih bio ograničen na tako mali skup fontova? Imam ogromnu kolekciju prekrasnih fontova!” Činjenica je da pretraživač posjetitelja može prikazati samo one fontove koji su instalirani u njegovom operativni sistem ( cca. prevodilac: Trenutno je već moguće koristiti gotovo sve fontove pri dizajniranju stranica koristeći CSS 3 i njegovo novo svojstvo @font-face; međutim, svi pretraživači još uvijek ne podržavaju ovu funkciju), što znači da svaki posjetitelj vaše stranice mora biti vlasnik fontova koje ste odabrali. Stoga biste trebali koristiti samo fontove koji su dostupni na svakom operativnom sistemu. Srećom, CSS ima svojstvo @font-family, što olakšava ovaj zadatak.
Lista
| @font-family značenje | Windows | Mac | Porodica |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial Black | Arial Black, Gadget | sans-serif |
| "Comic Sans MS", kurziv | Comic Sans MS | Comic Sans MS 5 | cursive |
| "Courier New", Courier, monospace | Courier New | Kurir Novo, Kurir 6 | monospace |
| Gruzija, Serif | Gruzija 1 | Georgia | serif |
| Impact, Charcoal, sans-serif | Uticaj | Udar 5, Ugalj 6 | sans-serif |
| "Lucida Console", Monako, monospace | Lucida Console | Monako 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatinska linotipija, knjiga Antiqua 3 | Palatino 6 | serif |
| Tahoma, Ženeva, sans-serif | Tahoma | Ženeva | sans-serif |
| "Times New Roman", Times, serif | Times New Roman | Times | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
| Verdana, Ženeva, sans-serif | Verdana | Verdana, Ženeva | sans-serif |
| Simbol | Simbol 2 | Simbol 2 | - |
| Webdings | Veze 2 | Veze 2 | - |
| Wingdings, "Zapf Dingbats" | Krila 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Ženeva, sans-serif | MS Sans Serif 4 | Ženeva | sans-serif |
| "MS Serif", "New York", serif | MS Serif 4 | Njujork 6 | serif |
1 Fontovi Georgia i Trebuchet MS se isporučuju sa Windows 2000/XP i uključeni su u IE paket fontova (i zaista dolaze sa mnogim Microsoft aplikacijama), tako da su instalirani na mnogim Windows 98 računarima.
2 Fontovi simbola se prikazuju samo u Internet Exploreru; u drugim pretraživačima se obično zamjenjuju standardnim fontom (iako se, na primjer, font Symbol prikazuje u Operi, a Webdings u Safariju).
3 Font Book Antiqua je gotovo identičan Palatino Linotype; Palatino Linotype dolazi sa Windows 2000/XP, a Book Antiqua dolazi sa Windows 98.
4 Imajte na umu da ovi fontovi nisu TrueType, već bitmap, tako da mogu izgledati loše u nekim veličinama (dizajnirani su za prikaz od 8, 10, 12, 14, 18 i 24 pt pri 96 DPI).
5 Ovi fontovi rade samo u Safariju u standardnom stilu, ali ne rade podebljani ili kurziv. Comic Sans MS također radi podebljano, ali ne i kurziv. Čini se da drugi Mac pretraživači dobro emuliraju svojstva fonta koji nedostaju (hvala Christianu Fecteauu na savjetu).
6 Ovi fontovi su instalirani na Mac samo uz klasičnu instalaciju
Screenshots
- Mac OS X 10.4.8, Firefox 2.0, ClearType omogućen (hvala Juris Vecvanags na snimku ekrana)
- Mac OS X 10.4.4, Firefox 1.5, ClearType omogućen
- Mac OS X 10.4.11, Safari 3.0.4, ClearType omogućen (hvala Nolanu Gladijusu na snimku ekrana)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType omogućen (hvala Eric Zavesky na snimku ekrana)
- Windows Vista, Internet Explorer 7, ClearType omogućen
- Windows Vista, Firefox 2.0, ClearType omogućen (hvala Michielu Bijlu na snimku ekrana)
Kada počnete da kreirate izgled, morate posebno navesti u CSS-u fontove koji se koriste na stranici. Često, u različitim fontovima, dizajner upisuje ne samo glavni tekst stranice, već i razne naslove, logotipe i monograme:
Dobar dizajner, kao i dobar dizajner izgleda, zna da pretraživač može koristiti samo one fontove koji su instalirani na korisnikovom računaru za prikaz stranice. Odnosno, fontovi se mogu podijeliti u dvije kategorije:
- Fontovi koje će velika većina korisnika bez problema prikazati.
- Fontovi koje prilično velika grupa korisnika nema.
Ako je dizajner koristio fontove druge kategorije za kreiranje, na primjer, logotipa ili velikih statičkih naslova, ne možete oklijevati da koristite tehniku. Nedostatak korištenja ove tehnike je nefleksibilnost. Ako dođe do promjena u tekstu, morat ćete ponovo napraviti sliku i promijeniti CSS (na primjer, ako se dimenzije nove slike ne poklapaju sa starom).
Možemo reći da opasnost od korištenja tehnike direktno ovisi o vjerovatnoći promjene teksta. Stoga, na primjer, opći tekst stranice ne može biti napisan nestandardnim fontovima! Kompetentan dizajner to nikada ne bi uradio. A ako dizajner naiđe na zeleni, dobar dizajner rasporeda jednostavno je dužan ispraviti svoju grešku - u izgledu ovaj font zamijeniti najsličnijim standardnim.
Ali kako razlikovati fontove prve grupe od druge? Jasno je da se ne možete osloniti na skup fontova instaliranih direktno na vašem računaru! Hajde da to shvatimo.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju sa operativnim sistemom. Pošto su operativni sistemi različiti, njihov skup fontova je drugačiji. Lista standardnih fontova za različite verzije Windows-a može se naći, na primjer, u članku Standardni Windows fontovi, a lista standardnih fontova za Mac OS na stranici Fontovi uključeni u Mac OS. Što se tiče Unix/Linux operativnih sistema, oni nemaju jedan skup fontova. Mnogi korisnici Linuxa koriste DejaVu skup fontova, posebno na Ubuntu-u oni su instalirani po defaultu. Prema statistici sa http://www.codestyle.org, mnogi korisnici Unixa/Linuxa takođe imaju instalirane URW, Free i druge skupove fontova. Prema istoj statistici, više od 60% korisnika Unixa/Linuxa na svom računaru ima fontove iz Core fontova za Web, koji su do 2002. godine bili zvanično dostupni za besplatno preuzimanje na Microsoft web stranici.
Da bi stranica bila prikazana onako kako je dizajner zamislio, na bilo kom operativnom sistemu, moguće je navesti nekoliko fontova u svojstvu CSS-a, odvojenih zarezima.
Ovo svojstvo specificira prioritetnu listu imena porodica fontova i/ili generičkih imena porodice. Prema CSS2 specifikaciji, postoje dvije vrste imena porodice fontova:
- Ime porodice fonta po vašem izboru. Na primjer, "Times new Roman", "Arial" i drugi. Imena porodica fontova koja sadrže razmake moraju biti stavljena pod navodnike. Ako nedostaju navodnici, svi znakovi razmaka prije i poslije naziva fonta se zanemaruju, a svaki niz razmaka unutar naziva fonta se pretvara u jedan razmak.
- Generička (zajednička) porodica. Specifikacija definira sljedeće generičke porodice:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans-serif fontovi;
- cursive — kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Dakle, za dizajn je uzet standardni font iz OS Windows, odabran je sličan za Mac OS i Unix/Linux, specificirana je zajednička porodica fontova i gotovi ste.
Ali to nije tako jednostavno. Hajde da kopamo detaljnije.
Pronalaženje sigurnih fontova na webu
Na Internetu se koncept „sigurnih“ web fontova istorijski razvio. Bezbedan font je font koji je standardan za sve operativne sisteme. Pošto se o takvom stanju može samo sanjati Ne postoje apsolutno sigurni fontovi!
Neki fontovi se mogu nazvati sigurnima uz određene rezerve.
Osnova za definisanje „sigurnih“ fontova bili su fontovi najčešćeg Windows operativnog sistema, koji se koriste i u drugim operativnim sistemima. Primjer takve upotrebe su već spomenuti Core fontovi za paket Web fontova, koji su, prema statistikama, preuzeli mnogi korisnici Unixa/Linuxa.
Ovaj paket uključuje sljedeće fontove: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Svi oni podržavaju ćirilično pismo, što je važno za Runet.
Skup fontova koji dolazi standardno uz Mac OS X (ovaj OS je najčešće korišten među korisnicima Mac OS-a) uključuje sve fontove iz Core fontova za Web set.
Tako je, na osnovu Windows fontova koji se koriste u drugim operativnim sistemima, formirana sljedeća lista takozvanih „sigurnih“ web fontova:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
Webdings font sadrži ikone i ne može se koristiti za sadržaj. Andale Mono se ne koristi široko jer nije pogodan za svakodnevno čitanje sa ekrana i nemaju ga svi korisnici Windowsa.
Svaki korisnik Windowsa, Mac OS X-a i velika većina Unix/Linux korisnika (tj. oni koji su instalirali Core fontove za Web paket) imaju sve ove fontove.
Ali šta je sa ostatkom? Na kraju krajeva, želite da plan dizajnera vidi što više korisnika!
O tome čitajte u drugom dijelu publikacije.
Kada počnete da kreirate izgled, morate posebno navesti u CSS-u fontove koji se koriste na stranici. Često, u različitim fontovima, dizajner upisuje ne samo glavni tekst stranice, već i razne naslove, logotipe i monograme.
Dobar dizajner, kao i dobar dizajner izgleda, zna da pretraživač može koristiti samo one fontove koji su instalirani na korisnikovom računaru za prikaz stranice. Odnosno, fontovi se mogu podijeliti u dvije kategorije:
- Fontovi koje će velika većina korisnika bez problema prikazati.
- Fontovi koje prilično velika grupa korisnika nema.
Ako je dizajner koristio fontove druge kategorije za kreiranje, na primjer, logotipa ili velikih statičkih naslova, ne možete oklijevati da koristite tehniku zamjene teksta slikom. Nedostatak korištenja ove tehnike je nefleksibilnost. Ako dođe do promjena u tekstu, morat ćete ponovo napraviti sliku i promijeniti CSS (na primjer, ako se dimenzije nove slike ne poklapaju sa starom).
Možemo reći da opasnost od korištenja tehnike direktno ovisi o vjerovatnoći promjene teksta. Stoga, na primjer, opći tekst stranice ne može biti napisan nestandardnim fontovima! Kompetentan dizajner to nikada ne bi uradio. A ako dizajner naiđe na zeleni, dobar dizajner rasporeda jednostavno je dužan ispraviti svoju grešku - u izgledu ovaj font zamijeniti najsličnijim standardnim.
Ali kako razlikovati fontove prve grupe od druge? Jasno je da se ne možete osloniti na skup fontova instaliranih direktno na vašem računaru! Hajde da to shvatimo.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju sa operativnim sistemom. Pošto su operativni sistemi različiti, njihov skup fontova je drugačiji. Lista standardnih fontova za različite verzije Windows-a može se naći, na primjer, u članku Standardni Windows fontovi, a lista standardnih fontova za Mac OS na stranici Fontovi uključeni u Mac OS. Što se tiče Unix/Linux operativnih sistema, oni nemaju jedan skup fontova. Mnogi korisnici Linuxa koriste DejaVu skup fontova, posebno na Ubuntu-u oni su instalirani po defaultu. Prema statistici sa http://www.codestyle.org, mnogi korisnici Unixa/Linuxa takođe imaju instalirane URW, Free i druge skupove fontova. Prema istoj statistici, više od 60% korisnika Unixa/Linuxa na svom računaru ima fontove iz Core fontova za Web, koji su do 2002. godine bili zvanično dostupni za besplatno preuzimanje na Microsoft web stranici.
Da bi stranica bila prikazana kao dizajner predviđen na bilo kom operativnom sistemu, moguće je navesti nekoliko fontova u svojstvu porodice fontova CSS, koji su navedeni odvojeni zarezima.
Ovo svojstvo specificira prioritetnu listu imena porodica fontova i/ili generičkih imena porodice. Prema CSS2 specifikaciji, postoje dvije vrste imena porodice fontova:
- Ime porodice fonta po vašem izboru. Na primjer, “Times new Roman”, “Arial” i drugi. Imena porodica fontova koja sadrže razmake moraju biti stavljena pod navodnike. Ako nedostaju navodnici, svi znakovi razmaka prije i poslije naziva fonta se zanemaruju, a svaki niz razmaka unutar naziva fonta se pretvara u jedan razmak.
- Generička (zajednička) porodica. Specifikacija definira sljedeće generičke porodice:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans-serif fontovi;
- kurzivni - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Imena klanova su ključne riječi i ne moraju biti stavljene pod navodnike.
Dakle, za dizajn je uzet standardni font iz OS Windows, odabran je sličan za Mac OS i Unix/Linux, specificirana je zajednička porodica fontova i gotovi ste.
Ali to nije tako jednostavno. Hajde da kopamo detaljnije.
Pronalaženje sigurnih fontova na webu
Na Internetu se koncept „sigurnih“ web fontova istorijski razvio. Bezbedan font je font koji je standardan za sve operativne sisteme. Pošto o takvom stanju možemo samo da sanjamo, apsolutno sigurnih fontova ne postoje!
Neki fontovi se mogu nazvati sigurnima uz određene rezerve.
Osnova za definisanje „sigurnih“ fontova bili su fontovi najčešćeg Windows operativnog sistema, koji se koriste i u drugim operativnim sistemima. Primjer takve upotrebe su već spomenuti Core fontovi za paket Web fontova, koji su, prema statistikama, preuzeli mnogi korisnici Unixa/Linuxa.
Ovaj paket uključuje sljedeće fontove: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Svi oni podržavaju ćirilično pismo, što je važno za Runet.
Skup fontova koji dolazi standardno uz Mac OS X (ovaj OS je najčešće korišten među korisnicima Mac OS-a) uključuje sve fontove iz Core fontova za Web set.
Tako je, na osnovu Windows fontova koji se koriste u drugim operativnim sistemima, formirana sljedeća lista takozvanih „sigurnih“ web fontova:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
Webdings font sadrži ikone i ne može se koristiti za sadržaj. Andale Mono se ne koristi široko jer nije pogodan za svakodnevno čitanje sa ekrana i nemaju ga svi korisnici Windowsa.
Svaki korisnik Windowsa, Mac OS X-a i velika većina Unix/Linux korisnika (tj. oni koji su instalirali Core fontove za Web paket) imaju sve ove fontove.
Ali šta je sa ostatkom? Na kraju krajeva, želite da plan dizajnera vidi što više korisnika!
Fontovi koji podržavaju ćirilicu
Specifična karakteristika RuNeta je problem sa kodiranjem stranica i podrškom za ćirilicu u fontovima. Kako bi izbjegli probleme s raznim kodiranjem znakova, pametni ljudi su smislili Unicode, koji vam omogućava da u jednom fontu kombinirate znakove iz nekoliko jezika. Dakle, za stranice na ruskom jeziku morate koristiti samo Unicode fontove koji podržavaju ćirilicu.
Ispod je tabela korespondencije fontova.
| Windows | MacOS | Unix/Linux | porodica predaka |
|---|---|---|---|
| Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako CY | * (vidi ispod) | cursive |
| Courier New | * (vidi ispod) | Nimbus Mono L | Monospace |
| Georgia | * (vidi ispod) | Century Schoolbook L | Serif |
| Uticaj | Charcoal C.Y. | * (vidi ispod) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (vidi ispod) | Sans-serif |
| Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* u koloni nasuprot fontu znači da operativni sistem nema izvorne ćirilične ekvivalente Windows fontu. Ali u isto vrijeme, postoji velika vjerovatnoća da je sam ovaj font instaliran direktno u operativni sistem.
Na primjer, ako je glavni tekst izgleda Arial, nalazimo ovaj font u tabeli i upisujemo odgovarajući red u CSS:
tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
tijelo ( font - porodica: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
Ovaj unos znači da ako korisnik ima font Arial (a imaju ga svi korisnici Windowsa i svi korisnici Mac OS X-a), onda će stranica biti prikazana u ovom fontu. Ako korisnik nema ovaj font, tada će stranica ruskog korisnika Mac OS 9 biti tačno prikazana u standardnom sistemskom fontu Helvetica CY, a za Unix/Linux korisnika će biti prikazana u fontu Nimbus Sans L , koji je instaliran na 90% Unix/Linux korisnika. Ako je Unix/Linux korisnik u onih 10% koji nemaju ovaj font, tada će stranica biti prikazana u serif fontu koji je po defaultu postavljen za pregled web stranica.
Pored činjenice da tabela uzima u obzir Unix/Linux fontove, postoji i neka čudna CY ikona nakon uobičajene Helvetice. Hajde da shvatimo šta je to!
Prije izlaska Mac OS X-a, ova linija je imala sljedeće značenje: za korisnike Windows-a stranicu prikazujemo u Arial-u, za korisnike Mac OS-a 9 u standardnom Helvetica fontu, a za ostalo vidimo stranicu u sistemu sans-serif font, koji je podrazumevano konfigurisan u pretraživaču. Ali opet, važna nijansa! Standardni Mac OS 9 Helvetica font nema ćirilicu! Za stranicu na ruskom jeziku to je značilo sljedeće: za korisnike Windowsa prikazujemo stranicu Arial, za korisnike Mac OS 9 - u standardnom Helvetica fontu, koji prikazuje nečitljive informacije, a ostali vide stranicu sa sistemom sans-serif font konfigurisan po defaultu u pretraživaču.
Za ispravan prikaz ovog skupa za korisnike Mac OS 9, umjesto nećirilizirane Helvetica, ima smisla navesti isti standardni Mac OS 9 font Helvetica CY, koji sadrži ćirilicu.
Čitanje ravnala se promijenilo od objavljivanja Mac OS X-a. Sada postoji jedan uobičajeni standardni font specificiran za Windows/Mac OS X. A ako želimo da korisnici Mac OS 9 mogu vidjeti namjeru dizajnera, moramo uključiti font koji sadrži ćirilicu u liniji fonta.
Dakle, iako ne postoje sigurni fontovi, postoje sigurne porodice fontova. Oni se takođe zovu font CSS stekovi. Pored standardnih Windows/Mac OS X fontova, ovi redovi mogu uključivati i ekvivalentne fontove iz standardnog skupa Mac OS 9 (koji podrazumevano ne sadrži „sigurne” fontove) i uobičajene Unix/Linux fontove.
Svaki dizajner izgleda prije ili kasnije naiđe na trenutak kada dizajner koristi font u izgledu koji nije uključen u listu „sigurnih“ fontova; Ali ovo još nije razlog za uzbunu! Na primjer, dizajneri vrlo često koriste Tahoma font na izgledima, koji nije uključen u ovu listu. Pravilno konstruirana linija fontova otvara mogućnost korištenja ne samo Tahoma, već i drugih fontova. Sve veći broj dizajnera iskorištava ovu priliku, a kompetentan layout dizajner bi to trebao znati.
Ispod je dodatna tabela fontova koji nisu uključeni u listu „sigurnih“ fontova, ali se mogu koristiti u izgledima.
| Windows | MacOS | porodica predaka |
|---|---|---|
| Lucida Console | Monako | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Geneva C.Y. | Sans-serif |
Šta ako nema ćirilice?
Za tekstove na engleskom jeziku gornje tabele imaju malo drugačiji izgled.
| Windows | MacOS | Unix/Linux | porodica predaka |
|---|---|---|---|
| Arial Black | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako | TSCu_Comic | cursive |
| Courier New | Kurir | Nimbus Mono L | Monospace |
| Georgia | * (vidi ispod) | Century Schoolbook L | Serif |
| Uticaj | Ugalj | Rekha | Sans-serif |
| Times New Roman | Times | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica | Garuda | Sans-serif |
| Verdana | Ženeva | DejaVu Sans | Sans-serif |
Za fontove Arial, Courier New i Times New Roman, prilikom kreiranja lenjira, bolje je prvo navesti Unix/Linux font, a zatim Mac OS font. Ovo je zbog neke iskrivljenosti skupa jezgri Linux X11 fontova.
Fontovi koji nisu uključeni u "sigurnu" listu, ali se mogu koristiti u izgledima, bolje su definisani pomoću CSS fontova na osnovu ove tabele.
| Windows | MacOS | Unix/Linux | porodica predaka |
|---|---|---|---|
| Lucida Console | Monako | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Palatino Linotype | Palatino | Garuda** | Sans-serif |
| Tahoma | Ženeva | Kalimati | Sans-serif |
Crtica u koloni Unix/Linux označava da će korisnici ovih operativnih sistema najvjerovatnije vidjeti zadani font na stranici.
** U ovom redu ima smisla postaviti font Garuda ispred Palatino (pogledajte objašnjenje iznad).
Zaključci:
- Ne postoje apsolutno sigurni fontovi. Sljedeći fontovi se mogu smatrati uslovno sigurnim:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
- Sigurni CSS stekovi koji uzimaju u obzir podršku za ćirilično pismo u fontovima možete pronaći u članku.
- Ako podrška za ćirilicu nije važna na stranici, koristimo CSS stekove iz članka.
Fontovi su sastavni i vrlo važan dio dizajna web stranice, koji naglašava njenu individualnost. U članku će se govoriti o povezivanju standardnih fontova sa web stranicom, nazivaju se i sistemskim fontovima, a u sljedećem članku ćemo se detaljno osvrnuti na odabir i povezivanje fontova iz Google Fontova na WordPress stranicu.
Sistemski, standardni, sigurni fontovi
Svaki pretraživač prikazuje samo one fontove koji su prisutni u operativnom sistemu računara. Zato se zovu sistemski i instaliraju se po defaultu zajedno sa operativnim sistemom.
A nazivaju se sigurnim fontovima jer će vjerovatno biti prikazani u pretraživaču većine posjetitelja stranice.
Ali problem je što različiti operativni sistemi imaju različite skupove instaliranih fontova. Možete pogledati skupove isporučenih fontova zajedno sa operativnim sistemom na zvaničnim stranicama Windows i Mac OS-a. A u Unixu/Linuxu uopšte nema standardnog skupa.
Kako bi internet stranica bila prikazana u skladu sa idejom dizajnera, u CSS je instalirano svojstvo fonta pod nazivom font-family
svojstvo porodice fontova
Svojstvo font-family su porodice fontova grupisane prema određenim karakteristikama.
Generičke porodice:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans-serif fontovi;
- kurzivni - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Na ovaj način se jednostavno biraju slični fontovi iz različitih operativnih sistema i povezuju na internet stranicu odvojeni zarezima.
Evo primjera, samo za vizualnu percepciju. Vratit ćemo se na ovaj primjer kasnije kada budemo razmatrali direktno povezivanje fontova.
Samo slijedite logiku i sve će postati kristalno jasno.
Tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
Pogledajmo šta je napisano:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generička porodica - sans-serif.
Takozvani sigurni fontovi
Na osnovu OS Windows, sastavljena je lista nekoliko sigurnih fontova.
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
Svi ovi fontovi su instalirani na Mac OS X, Windows i mnogim Unix/Linux korisnicima koji imaju instalirane Core fontove za Web paket.
Za ostale korisnike obezbeđena je tabela korespondencije. Sadrži slične fontove koji pripadaju određenoj porodici.
Tabela korespondencije i pripadnosti fontova određenoj porodici:
| Windows | MacOS | Unix/Linux | porodica predaka |
|---|---|---|---|
| Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako CY | * (vidi ispod) | cursive |
| Courier New | * (vidi ispod) | Nimbus Mono L | Monospace |
| Georgia | * (vidi ispod) | Century Schoolbook L | Serif |
| Uticaj | Charcoal C.Y. | * (vidi ispod) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (vidi ispod) | Sans-serif |
| Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* Kada povezujete fontove, možete se sigurno osloniti na njega. Tabela podržava ćirilično pismo i rusko pismo.
Uzeo sam samu tabelu u ovom članku.
Povezivanje sistemskih fontova sa sajtom
Postoji nekoliko načina za povezivanje sistemskih fontova sa svojom web lokacijom. Osim toga, možete povezati različite fontove s različitim paragrafima. Primijenite različite fontove na pojedinačne riječi i fraze. Sada ću pokušati da razmotrim sve ovo.
Dakle, uradimo sve po redu.
Povezivanje fontova u CSS datoteci
Ako trebate da se povežete glavni font za cijeli dokument, samo trebate dodati sljedeći kod u stilski list:
Body (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font sa cijelim dokumentom */ font-size: 16px; /* dodatno postavite veličinu fonta */ font -weight: 400; /* postavite težinu fonta, ili umjesto 400, postavite vrijednost na normalnu */ )
Dodjeljivanje fonta za naslove H1, H2, H3, H4, H5, H6, (ovdje je isto, samo smo podebljali vrijednost da istaknemo naslove):
H1,h2,h3,h4,h5,h6( porodica fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font sa naslovima */ font-weight: 600; / * postavite težinu fonta, ili umjesto 600, postavite vrijednost na podebljano */ )
Font dodjeljujemo samo paragrafima:
P( porodica fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font sa paragrafima, može se primijeniti na li liste, div blokove, forme i druge elemente */ font-weight : normalno; /* postavite težinu fonta, ili umjesto 600, postavite vrijednost na bold */ font-size: 16px; /* dodatno postavite veličinu fonta za pasuse */ )
To dodijelite font samo određenom pasusu, ili blok, prvo morate dodijeliti klasu ovom bloku u HTML dokumentu
Evo pasusa sa prilagođenim fontom
I u CSS tablicu napišite sljedeći kod:
Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povezujemo font sa određenim paragrafima, može se primijeniti na pojedinačne li liste, div blokove, forme i druge elemente */ font- weight: normal; /* postavite težinu fonta, ili umjesto 600, postavite vrijednost na bold */ font-size: 16px; /* dodatno postavite veličinu fonta za pasuse */ )
Sada će svakom tag-u - html elementu sa klasom .font (nazovite ga kako god želite) biti dodijeljen Arial font, normalnog (400), podebljanosti i veličine od 16 piksela.
Slično tome, možete dodijeliti različite fontove li listama, tablicama, cijelim div blokovima, pojedinačnim riječima ili frazama.
Povezivanje fontova u HTML dokumentu
Fontovi su uključeni direktno u HTML dokument na isti način kao i CSS fajl, jedina razlika je u sintaksi. Možete uključiti fontove u zaglavlje dokumenta - između oznaka
(slično CSS fajlu), ili inline - dodeljivanje svojstava direktno html tagovima.Uključujući fontove u zaglavlju, između oznaka
. Da biste to učinili, dodajte sljedeći kod u html dokument:
Neću se ponavljati ovdje. Sve je slično povezivanju u CSS datoteci.
Povezivanje fontova u liniji, direktno na elemente stranice. Dozvolite mi da vam dam nekoliko primjera:
Povezivanje fonta sa paragrafom
Evo jednog pasusa sa tekstom
Podebljamo posebnu riječ i dodijelimo poseban font od glavnog
Evo jednog pasusa sa tekstom, i ovo riječ, koje treba istaknuti podebljanim slovima
Evo linka
Slično, dodjeljujemo fontove bilo kojoj html oznaci.
Ali ipak je najbolje i preporučljivo dodijeliti stilove elementima putem CSS datoteke. Prvo, trebate napisati stilove u CSS-u samo jednom, a zatim dodijeliti samo potrebnu klasu u HTML-u. Drugo, pisanjem umetnutih stilova stvara se duplirani sadržaj. Čini se da su ova svojstva i klase indeksirane od strane pretraživača, a čuo sam da W3C želi potpuno ukinuti inline. Iako je ponekad lakše pisati stilove na ovaj način.
Sve. Pratite ažuriranja stranice, pripremam članak o povezivanju nestandardnih i originalnih fontova na stranicu kako bi se ispravno prikazivali u svim pretraživačima. Također ću vas upoznati s nekoliko dobrih usluga gdje možete odabrati prilagođene fontove.
