Ako ste novi u web dizajnu, možda mislite nešto poput: "Zašto bih trebao biti ograničen na tako mali skup fontova? Imam ogromnu kolekciju prekrasnih fontova!” Činjenica je da preglednik posjetitelja može prikazati samo one fontove koji su instalirani u njegovom operacijski sustav ( cca. prevoditelj: Trenutno je već moguće koristiti gotovo sve fontove pri dizajniranju stranica koristeći CSS 3 i njegovo novo svojstvo @font-lice; međutim, svi preglednici još 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 sustavu. Srećom, CSS ima svojstvo @obitelji-fontova, što olakšava ovaj zadatak.
Popis
| @font-family značenje | Windows | Mac | Obitelj |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial Crna | Arial Black, Gadget | sans-serif |
| "Comic Sans MS", kurziv | Comic Sans MS | Comic Sans MS 5 | rukopisni |
| "Courier New", Kurir, monospace | Kurir Novo | Kurir Novo, Kurir 6 | monospace |
| Georgija, Serif | Gruzija 1 | Gruzija | serif |
| Impact, ugljen, sans-serif | Udarac | Udar 5, ugljen 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 | Palatino Linotype, Book Antiqua 3 | Palatino 6 | serif |
| Tahoma, Ženeva, sans-serif | Tahoma | Ženeva | sans-serif |
| "Times New Roman", Times, serif | Times New Roman | puta | 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 | Vezice 2 | Vezice 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 | New York 6 | serif |
1 Fontovi Georgia i Trebuchet MS isporučuju se s Windows 2000/XP i uključeni su u paket fontova IE (i doista dolaze s mnogim Microsoftovim aplikacijama), tako da su instalirani na mnogim Windows 98 računalima.
2 Fontovi simbola prikazuju se samo u Internet Exploreru; u drugim preglednicima obično se zamjenjuju standardnim fontom (iako se, primjerice, font Symbol prikazuje u Operi, a Webdings u Safariju).
3 Font Book Antiqua gotovo je identičan Palatino Linotype; Palatino Linotype dolazi s Windows 2000/XP, a Book Antiqua dolazi s Windows 98.
4 Imajte na umu da ovi fontovi nisu TrueType, već bitmapa, tako da mogu izgledati loše u nekim veličinama (oni su dizajnirani za prikaz u 8, 10, 12, 14, 18 i 24 pt pri 96 DPI).
5 Ovi fontovi rade samo u Safariju u standardnom stilu, ali ne rade podebljano ili kurzivno. Comic Sans MS također radi podebljano, ali ne i kurzivom. Čini se da drugi Mac preglednici sami dobro emuliraju nedostajuća svojstva fonta (hvala Christianu Fecteauu na savjetu).
6 Ovi se fontovi instaliraju na Mac samo s klasičnom instalacijom
Snimke zaslona
- Mac OS X 10.4.8, Firefox 2.0, omogućen ClearType (hvala Jurisu Vecvanagsu na snimci zaslona)
- 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 Gladiusu na snimci zaslona)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType omogućen (hvala Ericu Zaveskyju na snimci zaslona)
- Windows Vista, Internet Explorer 7, omogućen ClearType
- Windows Vista, Firefox 2.0, omogućen ClearType (hvala Michielu Bijlu na snimci zaslona)
Kada počinjete stvarati izgled, morate u CSS-u posebno odrediti fontove koji se koriste na stranici. Često, u različitim fontovima, dizajner upisuje ne samo glavni tekst stranice, već i različite naslove, logotipe i monograme:
Dobar dizajner, kao i dobar dizajner izgleda, zna da preglednik može koristiti samo one fontove koji su instalirani na računalu korisnika za prikaz stranice. Odnosno, fontovi se mogu podijeliti u dvije kategorije:
- Fontovi koje će bez problema prikazati velika većina korisnika.
- Fontovi koje prilično velika skupina korisnika nema.
Ako je dizajner koristio fontove druge kategorije za izradu, na primjer, logotipa ili velikih statičnih naslova, ne možete oklijevati koristiti tehniku. Nedostatak korištenja ove tehnike je nefleksibilnost. Ako postoje promjene u tekstu, morat ćete ponovno napraviti sliku i promijeniti CSS (na primjer, ako dimenzije nove slike ne odgovaraju staroj).
Možemo reći da opasnost od korištenja tehnike izravno ovisi o vjerojatnosti promjene teksta. Stoga, na primjer, opći tekst stranice ne može biti napisan nestandardnim fontovima! Kompetentan dizajner to nikada ne bi učinio. A ako dizajner naiđe na zeleni, dobar dizajner izgleda jednostavno je dužan ispraviti njegovu grešku - u izgledu zamijenite ovaj font najsličnijim standardnim.
Ali kako razlikovati fontove prve skupine od druge? Jasno je da se ne možete osloniti na skup fontova instaliran izravno na vašem računalu! Hajdemo shvatiti.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju s operativnim sustavom. Budući da su operativni sustavi različiti, njihov skup fontova je drugačiji. Popis standardnih fontova za različite verzije Windowsa možete pronaći, primjerice, u članku Standardni Windows fontovi, a popis standardnih Mac OS fontova na stranici Fontovi uključeni u Mac OS. Što se tiče Unix/Linux operativnih sustava, oni nemaju niti jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, osobito na Ubuntuu oni su instalirani prema zadanim postavkama. Prema statistikama s http://www.codestyle.org, mnogi Unix/Linux korisnici također imaju instalirane URW, Free i druge skupove fontova. Prema istoj statistici, više od 60% Unix/Linux korisnika na svom računalu ima fontove iz skupa Core fontova za Web koji je do 2002. godine bio službeno dostupan za besplatno preuzimanje na Microsoftovim stranicama.
Kako bi stranica bila prikazana onako kako je dizajner zamislio, na bilo kojem operativnom sustavu, moguće je navesti nekoliko fontova u CSS svojstvu, odvojenih zarezima.
Ovo svojstvo navodi prioritetni popis naziva obitelji fontova i/ili generičkih naziva obitelji. Prema specifikaciji CSS2, postoje dvije vrste imena obitelji fontova:
- Naziv obitelji fonta po vašem izboru. Na primjer, "Times new Roman", "Arial" i drugi. Nazivi obitelji fontova koji sadrže razmake moraju biti u navodnicima. Ako navodnici nedostaju, svi razmaci prije i poslije naziva fonta se zanemaruju, a svaki niz razmaka unutar naziva fonta pretvara se u jedan razmak.
- Generička (zajednička) obitelj. Specifikacija definira sljedeće generičke obitelji:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans-serif fontovi;
- kurzivni — kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Dakle, za dizajn se uzima standardni font iz OS Windows, odabire se sličan za Mac OS i Unix/Linux, specificira se zajednička obitelj fontova i gotovi ste.
Ali nije to tako jednostavno. Kopajmo detaljnije.
Pronalaženje sigurnih web fontova
Na internetu se povijesno razvio koncept "sigurnih" web fontova. Siguran font je font koji je standardan za sve operativne sustave. Budući da se o takvom stanju stvari može samo sanjati Ne postoje apsolutno sigurni fontovi!
Neki se fontovi uz određene rezerve mogu nazvati sigurnima.
Osnova za definiranje “sigurnih” fontova bili su fontovi najčešćeg operativnog sustava Windows, koji se koriste i u drugim operativnim sustavima. Primjer takve upotrebe su već spomenuti Core fontovi za paket Web fontova koje su, prema statistikama, preuzeli mnogi Unix/Linux korisnici.
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 ćirilicu, što je važno za Runet.
Skup fontova koji standardno dolazi s Mac OS X (ovaj OS je najčešće korišten među korisnicima Mac OS-a) uključuje sve fontove iz skupa Core fontova za web.
Tako je na temelju Windows fontova koji se koriste u drugim operativnim sustavima formirana sljedeća lista takozvanih "sigurnih" web fontova:
- Arial
- Arial Crna
- Comic Sans MS
- Kurir Novo
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Font Webdings sadrži ikone i ne može se koristiti za sadržaj. Andale Mono nije u širokoj upotrebi jer nije dobro prilagođen za svakodnevno čitanje zaslona i nemaju ga svi korisnici Windowsa.
Svaki Windows, Mac OS X korisnik i velika većina Unix/Linux korisnika (tj. oni koji su instalirali Core fontove za web paket) imaju sve ove fontove.
Ali što je s ostatkom? Uostalom, želite da plan dizajnera vidi što je moguće više korisnika!
O tome čitajte u drugom dijelu publikacije.
Kada počinjete stvarati izgled, morate u CSS-u posebno odrediti fontove koji se koriste na stranici. Često, u različitim fontovima, dizajner upisuje ne samo glavni tekst stranice, već i različite naslove, logotipe i monograme.
Dobar dizajner, kao i dobar dizajner izgleda, zna da preglednik može koristiti samo one fontove koji su instalirani na računalu korisnika za prikaz stranice. Odnosno, fontovi se mogu podijeliti u dvije kategorije:
- Fontovi koje će bez problema prikazati velika većina korisnika.
- Fontovi koje prilično velika skupina korisnika nema.
Ako je dizajner koristio fontove druge kategorije za izradu, na primjer, logotipa ili velikih statičnih naslova, ne možete oklijevati koristiti tehniku zamjene teksta slikom. Nedostatak korištenja ove tehnike je nefleksibilnost. Ako postoje promjene u tekstu, morat ćete ponovno napraviti sliku i promijeniti CSS (na primjer, ako dimenzije nove slike ne odgovaraju staroj).
Možemo reći da opasnost od korištenja tehnike izravno ovisi o vjerojatnosti promjene teksta. Stoga, na primjer, opći tekst stranice ne može biti napisan nestandardnim fontovima! Kompetentan dizajner to nikada ne bi učinio. A ako dizajner naiđe na zeleni, dobar dizajner izgleda jednostavno je dužan ispraviti njegovu grešku - u izgledu zamijenite ovaj font najsličnijim standardnim.
Ali kako razlikovati fontove prve skupine od druge? Jasno je da se ne možete osloniti na skup fontova instaliran izravno na vašem računalu! Hajdemo shvatiti.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju s operativnim sustavom. Budući da su operativni sustavi različiti, njihov skup fontova je drugačiji. Popis standardnih fontova za različite verzije Windowsa možete pronaći, primjerice, u članku Standardni Windows fontovi, a popis standardnih Mac OS fontova na stranici Fontovi uključeni u Mac OS. Što se tiče Unix/Linux operativnih sustava, oni nemaju niti jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, osobito na Ubuntuu oni su instalirani prema zadanim postavkama. Prema statistikama s http://www.codestyle.org, mnogi Unix/Linux korisnici također imaju instalirane URW, Free i druge skupove fontova. Prema istoj statistici, više od 60% Unix/Linux korisnika na svom računalu ima fontove iz skupa Core fontova za Web koji je do 2002. godine bio službeno dostupan za besplatno preuzimanje na Microsoftovim stranicama.
Kako bi se stranica prikazala onako kako je dizajner zamislio na bilo kojem operativnom sustavu, moguće je navesti nekoliko fontova u CSS svojstvu obitelji fontova, navedenih odvojenih zarezima.
Ovo svojstvo navodi prioritetni popis naziva obitelji fontova i/ili generičkih naziva obitelji. Prema specifikaciji CSS2, postoje dvije vrste imena obitelji fontova:
- Naziv obitelji fonta po vašem izboru. Na primjer, "Times new Roman", "Arial" i drugi. Nazivi obitelji fontova koji sadrže razmake moraju biti u navodnicima. Ako navodnici nedostaju, svi razmaci prije i poslije naziva fonta se zanemaruju, a svaki niz razmaka unutar naziva fonta pretvara se u jedan razmak.
- Generička (zajednička) obitelj. Specifikacija definira sljedeće generičke obitelji:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans-serif fontovi;
- kurzivni - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Prezime klanova su ključne riječi i ne moraju biti pod navodnicima.
Dakle, za dizajn se uzima standardni font iz OS Windows, odabire se sličan za Mac OS i Unix/Linux, specificira se zajednička obitelj fontova i gotovi ste.
Ali nije to tako jednostavno. Kopajmo detaljnije.
Pronalaženje sigurnih web fontova
Na internetu se povijesno razvio koncept "sigurnih" web fontova. Siguran font je font koji je standardan za sve operativne sustave. Budući da o takvom stanju stvari možemo samo sanjati, apsolutno sigurnih fontova nema!
Neki se fontovi uz određene rezerve mogu nazvati sigurnima.
Osnova za definiranje “sigurnih” fontova bili su fontovi najčešćeg operativnog sustava Windows, koji se koriste i u drugim operativnim sustavima. Primjer takve upotrebe su već spomenuti Core fontovi za paket Web fontova koje su, prema statistikama, preuzeli mnogi Unix/Linux korisnici.
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 ćirilicu, što je važno za Runet.
Skup fontova koji standardno dolazi s Mac OS X (ovaj OS je najčešće korišten među korisnicima Mac OS-a) uključuje sve fontove iz skupa Core fontova za web.
Tako je na temelju Windows fontova koji se koriste u drugim operativnim sustavima formirana sljedeća lista takozvanih "sigurnih" web fontova:
- Arial
- Arial Crna
- Comic Sans MS
- Kurir Novo
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Font Webdings sadrži ikone i ne može se koristiti za sadržaj. Andale Mono nije u širokoj upotrebi jer nije dobro prilagođen za svakodnevno čitanje zaslona i nemaju ga svi korisnici Windowsa.
Svaki Windows, Mac OS X korisnik i velika većina Unix/Linux korisnika (tj. oni koji su instalirali Core fontove za web paket) imaju sve ove fontove.
Ali što je s ostatkom? Uostalom, želite da plan dizajnera vidi što je moguće više korisnika!
Fontovi koji podržavaju ćirilicu
Posebna značajka RuNeta je problem s kodiranjem stranica i podrškom za ćirilicu u fontovima. Kako bi izbjegli probleme s različitim kodiranjem znakova, pametni su ljudi smislili Unicode, koji vam omogućuje kombiniranje znakova iz nekoliko jezika u jednom fontu. Dakle, za stranice na ruskom jeziku morate koristiti samo Unicode fontove koji podržavaju ćirilicu.
Ispod je tablica korespondencije fontova.
| Windows | MacOS | Unix/Linux | obitelj predaka |
|---|---|---|---|
| Arial Crna | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako CY | * (Pogledaj ispod) | rukopisni |
| Kurir Novo | * (Pogledaj ispod) | Nimbus Mono L | Monospace |
| Gruzija | * (Pogledaj ispod) | Stoljeća Školska knjiga L | Serif |
| Udarac | Drveni ugljen C.Y. | * (Pogledaj ispod) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (Pogledaj ispod) | Sans-serif |
| Verdana | Ženeva C.Y. | DejaVu Sans | Sans-serif |
* u stupcu nasuprot fonta znači da operativni sustav nema izvorne ćirilične ekvivalente Windows fontu. Ali u isto vrijeme postoji velika vjerojatnost da je sam ovaj font instaliran izravno u operacijskom sustavu.
Na primjer, ako je glavni tekst izgleda Arial, nalazimo ovaj font u tablici i ispisujemo odgovarajući redak u CSS-u:
tijelo (familija fonta: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
tijelo( font - obitelj: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
Ovaj unos znači da ako korisnik ima font Arial (a svi korisnici Windowsa i svi korisnici Mac OS X ga imaju), onda će stranica biti prikazana u ovom fontu. Ako korisnik nema ovaj font, tada će stranica korisnika Mac OS 9 koji govori ruski biti točno prikazana u standardnom sistemskom fontu Helvetica CY, a za korisnika Unix/Linuxa bit će 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 postavljen prema zadanim postavkama za pregledavanje web stranica.
Osim što tablica uzima u obzir Unix/Linux fontove, postoji i neka čudna CY ikona nakon uobičajene Helvetice. Hajdemo shvatiti što je to!
Prije izlaska Mac OS X-a ovaj je redak imao sljedeće značenje: za Windows korisnike stranicu prikazujemo u Arialu, za Mac OS 9 u standardnom Helvetica fontu, a za ostale vidimo stranicu u sustavu sans-serif font, koji je prema zadanim postavkama konfiguriran u pregledniku. Ali opet, važna nijansa! Standardni font Mac OS 9 Helvetica 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 fontu Helvetica, koji prikazuje nečitljive informacije, a ostali vide stranicu sa sustavom sans-serif font konfiguriran prema zadanim postavkama u pregledniku.
Za ispravan prikaz ovog skupa za korisnike Mac OS 9, umjesto nećirilizirane Helvetice, ima smisla navesti isti standardni Mac OS 9 font Helvetica CY, koji sadrži ćirilicu.
Čitanje lenjira promijenilo se od izdanja Mac OS X-a. Sada postoji jedan zajednički standardni font određen za Windows/Mac OS X. A ako želimo da korisnici Mac OS 9 mogu vidjeti namjeru dizajnera, trebamo uključiti font koji sadrži ćirilicu u red fonta.
Iako nema sigurnih fontova, postoje sigurne obitelji fontova. Također se nazivaju hrpe CSS fonta. Uz standardne Windows/Mac OS X fontove, ovi redovi također mogu sadržavati ekvivalentne fontove iz standardnog skupa Mac OS 9 (koji prema zadanim postavkama 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 popis "sigurnih" fontova; Ali to još nije razlog za uzbunu! Na primjer, dizajneri vrlo često koriste font Tahoma na prijelomima, koji nije uključen u ovaj popis. Pravilno izgrađena 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 dizajner izgleda to bi trebao znati.
Ispod je dodatna tablica fontova koji nisu uključeni u popis "sigurnih" fontova, ali se mogu koristiti u izgledima.
| Windows | MacOS | obitelj predaka |
|---|---|---|
| Lucida Console | Monako | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Ženeva C.Y. | Sans-serif |
Što ako nema ćirilice?
Za tekstove na engleskom jeziku gornje tablice imaju nešto drugačiji izgled.
| Windows | MacOS | Unix/Linux | obitelj predaka |
|---|---|---|---|
| Arial Crna | Naprava | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako | TSCu_Strip | rukopisni |
| Kurir Novo | Kurir | Nimbus Mono L | Monospace |
| Gruzija | * (Pogledaj ispod) | Stoljeća Školska knjiga L | Serif |
| Udarac | Drveni ugljen | Rekha | Sans-serif |
| Times New Roman | puta | 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 izrade lenjira, bolje je prvo odrediti Unix/Linux font, a zatim Mac OS font. To je zbog neke zakrivljenosti skupa temeljnih fontova za Linux X11.
Fontovi koji nisu uključeni u "sigurni" popis, ali se mogu koristiti u izgledima, bolje su definirani CSS skupovima fontova na temelju ove tablice.
| Windows | MacOS | Unix/Linux | obitelj predaka |
|---|---|---|---|
| Lucida Console | Monako | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Palatinski linotip | Palatino | Garuda** | Sans-serif |
| Tahoma | Ženeva | Kalimati | Sans-serif |
Crtica u stupcu Unix/Linux označava da će korisnici ovih operativnih sustava najvjerojatnije vidjeti zadani font na stranici.
** U ovom retku ima smisla staviti font Garuda ispred Palatino (pogledajte gornje objašnjenje).
Zaključci:
- Ne postoje apsolutno sigurni fontovi. Sljedeći fontovi mogu se smatrati uvjetno sigurnima:
- Arial
- Arial Crna
- Comic Sans MS
- Kurir Novo
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
- Sigurne CSS skupove koji uzimaju u obzir podršku za ćirilicu u fontovima možete pronaći u članku.
- Ako podrška za ćirilicu nije važna na stranici, koristimo CSS skupove iz članka.
Fontovi su sastavni i vrlo važan dio dizajna web stranice, ističući njezinu individualnost. U članku će biti riječi o povezivanju standardnih fontova na web stranicu, nazivaju se još i sistemski fontovi, au idućem članku ćemo se detaljno osvrnuti na odabir i povezivanje fontova iz Google Fontova na WordPress stranicu.
Sustav, standardni, sigurni fontovi
Svaki preglednik prikazuje samo one fontove koji su prisutni u operativnom sustavu računala. Zato se nazivaju sistemskim i instaliraju se prema zadanim postavkama zajedno s operativnim sustavom.
Nazivaju se sigurnim fontovima jer će se vjerojatno prikazati u pregledniku većine posjetitelja stranice.
Ali problem je u tome što različiti operativni sustavi imaju instalirane različite skupove fontova. Skupove isporučenih fontova zajedno s operativnim sustavom možete pogledati na službenim stranicama Windows i Mac OS. A u Unixu/Linuxu uopće 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 obitelji fontova
Svojstvo font-family su obitelji fontova grupirane prema određenim karakteristikama.
Generičke obitelji:
- 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 taj se način slični fontovi iz različitih operativnih sustava jednostavno odabiru i povezuju s internetskom stranicom odvojeni zarezima.
Evo primjera, samo za vizualnu percepciju. Kasnije ćemo se vratiti na ovaj primjer kada budemo razmatrali izravno povezivanje fontova.
Samo slijedite logiku i sve će vam postati kristalno jasno.
Tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
Pogledajmo što je napisano:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generička obitelj - sans-serif.
Takozvani sigurni fontovi
Na temelju OS Windows, sastavljen je popis nekoliko sigurnih fontova.
- Arial
- Arial Crna
- Comic Sans MS
- Kurir Novo
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Svi ovi fontovi instalirani su na Mac OS X, Windows i mnogim Unix/Linux korisnicima koji imaju instalirane Core fontove za web paket.
Za ostale korisnike dostupna je tablica korespondencije. Sadrži slične fontove koji pripadaju određenoj obitelji.
Tablica korespondencije i pripadnosti fontova određenoj obitelji:
| Windows | MacOS | Unix/Linux | obitelj predaka |
|---|---|---|---|
| Arial Crna | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monako CY | * (Pogledaj ispod) | rukopisni |
| Kurir Novo | * (Pogledaj ispod) | Nimbus Mono L | Monospace |
| Gruzija | * (Pogledaj ispod) | Stoljeća Školska knjiga L | Serif |
| Udarac | Drveni ugljen C.Y. | * (Pogledaj ispod) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (Pogledaj ispod) | Sans-serif |
| Verdana | Ženeva C.Y. | DejaVu Sans | Sans-serif |
* Kada povezujete fontove, možete se sigurno osloniti na to. Tablica podržava ćirilicu i rusku abecedu.
Uzeo sam samu tablicu u ovom članku.
Povezivanje sistemskih fontova sa web mjestom
Postoji nekoliko načina za povezivanje sistemskih fontova s vašim web mjestom. Osim toga, možete povezati različite fontove s različitim odlomcima. Primijenite različite fontove na pojedinačne riječi i fraze. Sada ću pokušati sve ovo razmotriti.
Dakle, učinimo sve po redu.
Povezivanje fontova u CSS datoteku
Ako se trebate spojiti glavni font za cijeli dokument, samo trebate dodati sljedeći kod u list stilova:
Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font s cijelim dokumentom */ font-size: 16px; /* dodatno postavite veličinu fonta */ font -weight: 400; /* postavite težinu fonta, ili umjesto 400, postavite vrijednost na normalno */ )
Dodjeljivanje fonta za naslove H1, H2, H3, H4, H5, H6, (ovdje je isto, samo smo podebljali vrijednost da bismo istaknuli naslove):
H1,h2,h3,h4,h5,h6( obitelj-fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font s naslovima */ težina-fonta: 600; / * postavite težinu fonta, ili umjesto 600, postavite vrijednost na podebljano */ )
Font dodjeljujemo samo paragrafima:
P( obitelj-fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* povežite font s paragrafima, može se primijeniti na li liste, div blokove, obrasce i druge elemente */ težina-fonta : normalno; /* postavite težinu fonta, ili umjesto 600, postavite vrijednost na podebljano */ font-size: 16px; /* dodatno postavite veličinu fonta za paragrafe */ )
Do dodijeliti font samo određenom paragrafu, ili blok, prvo morate dodijeliti klasu ovom bloku u HTML dokumentu
Evo odlomka s 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 s određenim paragrafima, može se primijeniti na pojedinačne li liste, div blokove, obrasce 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 paragrafe */ )
Sada će svakoj oznaci - html elementu s klasom .font (nazovite je kako god želite) biti dodijeljen Arial font, normalne (400), podebljanosti i veličine 16 piksela.
Slično tome, možete dodijeliti različite fontove li popisima, tablicama, cijelim div blokovima, pojedinačnim riječima ili frazama.
Povezivanje fontova u HTML dokumentu
Fontovi su uključeni izravno u HTML dokument na isti način kao i CSS datoteka, jedina razlika je u sintaksi. Možete uključiti fontove u zaglavlje dokumenta - između oznaka
(slično CSS datoteci), ili inline - dodjeljivanje svojstava izravno html oznakama.Uključujući fontove u zaglavlju, između oznaka
. Da biste to učinili, dodajte sljedeći kod u html dokument:
Neću se ovdje ponavljati. Sve je slično vezi u CSS datoteci.
Inline povezivanje fontova, izravno na elemente stranice. Dat ću vam nekoliko primjera:
Povezivanje fonta s odlomkom
Evo odlomka s tekstom
Istaknemo zasebnu riječ podebljano i dodijelimo poseban font od glavnog
Ovdje je pasus s tekstom, i ovo riječ, koje treba istaknuti masnim slovima
Evo poveznice
Slično, dodjeljujemo fontove bilo kojoj html oznaci.
No ipak je najbolje i preporučljivo dodjeljivati 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 ugrađenih stilova stvara se dvostruki sadržaj. Čini se da tražilice indeksiraju ova svojstva i klase, a čuo sam da W3C želi u potpunosti ukinuti inline. Iako je ponekad lakše pisati stilove na ovaj način.
Svi. Pratite ažuriranja web mjesta, pripremam članak o povezivanju nestandardnih i originalnih fontova s web mjestom kako bi se ispravno prikazivali u svim preglednicima. Također ću vam predstaviti nekoliko dobrih usluga na kojima možete odabrati prilagođene fontove.
