Jedan od glavnih zadataka web dizajna je pronalaženje pravog standardni fontovi... Usluge ugrađivanja fontova kao što su Google Web Fontovi ili Typekit stvorene su kao alternativa s namjerom da pruže nešto novo.
Vrlo su jednostavni za korištenje. Uzmimo Google Web Fontove kao primjer.
Odaberite font Open Sans, Droid Serif ili Lato. Napišite kod i zalijepite ga u element HTML dokument... Sve je spremno za povezivanje na njega u CSS-u! Cijeli proces nije trajao više od 60 sekundi. I sve je potpuno besplatno.
Što bi moglo biti pogrešno?
Neki fontovi možda nisu dostupni svima. To znači da može doći do problema. Sretni ste što ste odabrali prekrasan font za svoju web stranicu, a umjesto toga posjetitelj web stranice vidi ružne škrabotine.
To se neće dogoditi ako implementirate zamjensku opciju.
Koliko je važna upotreba sigurnih web fontova?
Svaki uređaj ima svoj vlastiti skup unaprijed instaliranih fontova. Koji ovisi o operativnom sustavu. Problem je što postoje male razlike između to dvoje.
A stranice? Na primjer, ovaj? Font koji vidite možda nije onaj koji je izvorno napisan za stranicu.
Što to znači? Recimo da je dizajner odabrao obitelj plaćenih fontova za stranicu. Ako ih nemate instalirane i ne pruža ih poseban web servis, tada je font koji vidite jedna od standardnih opcija. Na primjer, Times New Roman.
Stoga, kako na vašem ekranu tekst može izgledati jednostavno grozno.
I ovdje standardni fontovi za stranicu dostupan je u svim operativnim sustavima. Ovo je mala zbirka dostupna na Windows, Mac, Google, kao i Unix i Linux.
Uz ovu zbirku, dizajneri kao i vlasnici web-mjesta mogu odrediti koji font treba koristiti kao zamjenski. Tako postaje moguće kontrolirati kako će stranica izgledati na različitim uređajima.
Kao zamjenu, programer odabire font koji je vrlo sličan izvornom i bit će prikazan korisniku.
Pogledajmo izbor najpopularnijih standardni fontovi HTML.
15 najboljih sigurnih web fontova
Arial
Smatra se standardnim u većini slučajeva. Najčešći font " sans serif"Ili sjeckani fontovi ( koji nemaju serife na vrhovima slova). Često se koristi u sustavu Windows za zamjenu drugih znakova.
Helvetica
Helvetica je spas za dizajnere. Ovaj standardni web font radi gotovo uvijek ( barem kao sigurnosna mreža za druge fontove).
Times New Roman
Služi kao Arial za sans serife. Jedan je od najpopularnijih na Windows uređaji... Ovo je ažurirana verzija starog Times fonta.
Vremena
CSS standardni font Times je većini poznat. Mnogi ga se sjećaju po malim slovima u uskim stupcima starih novina. Najčešća vrsta tiska koja je postala tradicija.
Kurir nova
Slično Times New Romanu i korišteno kao varijacija na stare klasike. Također se smatra jednorazrednim fontom. Za razliku od serif i sans serif fontova, svi njegovi znakovi su iste širine.
Kurir
Stari font fiksne širine koji se koristi kao zamjenski na gotovo svim uređajima i operativnim sustavima.
Verdana
Verdana se s pravom može smatrati pravim web fontom ( pravi web font) zahvaljujući jednostavnim serifnim linijama i velikoj veličini. Slova su mu blago izdužena, pa se lako čitaju na ekranu.
Gruzija
Standardni Georgia web font sličan je obliku i veličini fontu Verdana. Njegovi su znakovi veći od ostalih fontova iste veličine. Ali bolje je ne koristiti ga u tandemu s drugima. Isti Times New Roman, u usporedbi s njim, izgleda kao patuljak.
Palatino
Palatino potječe iz renesanse. Bez šale. Ovo je još jedan veliki font koji je savršen za web. Obično se koristi u naslovima i reklamama.
Garamond
Još jedno staro pismo koje se pojavilo u 16. stoljeću u Parizu. Njegova nova i poboljšana verzija uključena je u standardni set u većini Windows uređaja. Kasnije su ovaj font usvojili i drugi operativni sustavi.
Književnik
Bookman ( ili Bookman Old Style) - jedan od najbolji standardni fontovi za naslove. Njegova karakteristična značajka je čitljivost čak i kada se koristi mala veličina.
Comic Sans MS
Comic Sans MS je zabavna alternativa za serif fontove.
Trebuchet MS
Riječ je o srednjovjekovnom fontu koji je izvorno razvio Microsoft sredinom devedesetih. Koristio se u sustavu Windows XP. Danas se koristi za sastavljanje glavnog teksta.
Arial crna
Analogno standardni font za stranicu Arial. Istina, veći je, deblji i žilaviji. Sličan je proporcionalno fontu Helvetica. I je li važno. Oni mogu uspješno zamijeniti Helveticu bez potrebe za kupnjom licence.
Udarac
Još jedan sjajan font za isticanje naslova. Dobro izgleda u kratkim, nekoliko riječi, kao i u dugim rečenicama.
Fontovi su sastavni i vrlo važan dio dizajna web stranice, koji naglašava njegovu individualnost. U članku će se govoriti o povezivanju standardnih fontova s web stranicom, nazivaju se i sistemskim fontovima, a u sljedećem članku pobliže ćemo se 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 operacijskom sustavu računala. Stoga se nazivaju sustavom i instaliraju se prema zadanim postavkama zajedno s operativnim sustavom.
A nazivaju se sigurnim fontovima jer će se najvjerojatnije prikazati u pregledniku većini posjetitelja stranice.
Ali cijeli je problem što su različiti skupovi fontova instalirani na različitim operativnim sustavima. Skupove isporučenih fontova zajedno s operativnim sustavom možete pogledati na službenim stranicama Windowsa, Mac OS-a. A u Unixu / Linuxu uopće nema standardnog skupa.
Kako bi web stranica bila prikazana u skladu s idejom dizajnera, u CSS-u je postavljeno svojstvo fonta pod nazivom font-family.
Svojstvo obitelji fontova
Svojstvo font-family je obitelj fontova grupirana prema određenim kriterijima.
Generičke obitelji:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans serif fontovi;
- cursive - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Stoga se slični fontovi iz različitih operacijskih sustava jednostavno odabiru i povezuju na internetsku stranicu odvojeni zarezima.
Evo primjera, samo za vizualnu percepciju. Vratit ćemo se na ovaj primjer kada pogledamo izravnu vezu fontova.
Samo slijedite logiku i sve će postati kristalno jasno.
Tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;)
Analizirajmo napisano:
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix / Linux - Nimbus Sans L;
- Generička obitelj je sans-serif.
Takozvani sigurni fontovi
Na temelju Windows OC-a sastavljen je popis nekoliko sigurnih fontova.
- Arial
- Arial crna
- Comic Sans MS
- Kurir nova
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Svi ovi fontovi instalirani su na Mac OS X, Windows i mnogim korisnicima Unixa/Linuksa koji imaju instalirane Core fontove za web.
Za ostale korisnike osigurana je tablica korespondencije. Sadrži izbor sličnih fontova koji pripadaju određenoj obitelji.
Tablica korespondencije i pripadnost fontova određenoj obitelji:
| Windows | Mac OS | Unix / Linux | Obitelj predaka |
|---|---|---|---|
| Arial crna | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako CY | * (Pogledaj ispod) | rukopisni |
| Kurir nova | * (Pogledaj ispod) | Nimbus Mono L | Monoprostor |
| Gruzija | * (Pogledaj ispod) | Stoljeća školska knjiga L | Serif |
| Udarac | Drveni ugljen CY | * (Pogledaj ispod) | Sans-serif |
| Times New Roman | Times CY | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica CY | * (Pogledaj ispod) | Sans-serif |
| Verdana | Ženeva CY | DejaVu Sans | Sans-serif |
* Kada povezujete fontove, možete se sigurno osloniti na to. Tablica podržava ćirilično pismo, rusko pismo.
Uzeo sam samu tablicu u ovom članku.
Povezivanje sistemskih fontova na stranicu
Postoji nekoliko načina za povezivanje sistemskih fontova na web mjesto. Osim toga, možete povezati različite fontove s različitim odlomcima. Primijenite različite fontove na određene riječi i izraze. Sve ovo sada ću pokušati razmotriti.
Pa da sve posložimo.
Povezivanje fontova u CSS datoteci
Ako se trebate povezati osnovni font za cijeli dokument, samo trebate dodati sljedeći kod u stylesheet:
Tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * dodajte font cijelom dokumentu * / font-size: 16px; / * dodatno postavite veličinu fonta * / font -težina: 400; / * postavite težinu fonta ili umjesto 400 postavite vrijednost na normalnu * /)
Dodjela fonta za naslove H1, H2, H3, H4, H5, H6, (ovdje je isto, samo postavite vrijednost težine za isticanje zaglavlja):
H1, h2, h3, h4, h5, h6 (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * dodaj font naslovima * / težina fonta: 600; / * postavi podebljanost fonta ili umjesto 600 postavite vrijednost - podebljano * /)
Font dodjeljujemo samo odlomcima:
P (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * dodajte font paragrafima, može se primijeniti na li liste, divove, obrasce i druge elemente * / težina fonta: normalno ; / * postavite podebljanost fonta ili umjesto 600 postavite vrijednost - bold * / font-size: 16px; / * dodatno postavite veličinu fonta za odlomke * /)
Do dodijeliti font samo određenom odlomku, ili blok, prvo morate dodijeliti klasu ovom bloku u HTML dokumentu
Evo odlomka s fontom koji se može dodijeliti
I u CSS tablicu upišite sljedeći kod:
Font (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * povežite font s određenim odlomcima, može se primijeniti na pojedinačne li liste, divove, obrasce i druge elemente * / font- težina: normalna; / * postavite težinu fonta ili umjesto 600 postavite vrijednost - bold * / font-size: 16px; / * dodatno postavite veličinu fonta za odlomke * /)
Sada će svakoj oznaci - html elementu klase .font (nazovite ga kako god želite) biti dodijeljen Arial font, normalne (400) težine i veličine 16 piksela.
Isto tako, možete dodijeliti različite fontove li listama, tablicama, cijelim divovima, pojedinačnim riječima ili frazama.
Povezivanje fontova u HTML dokumentu
Fontovi su povezani izravno s HTML dokumentom na isti način kao i CSS datoteka, jedina razlika je u sintaksi. Možete povezati fontove u naslovu dokumenta - između oznaka
(slično CSS datoteci), ili inline - dodjeljivanje svojstava izravno html oznakama.U zaglavlje uključujemo fontove, između oznaka
... Da biste to učinili, dodajte sljedeći kod u html dokument:
Neću se ovdje ponavljati. Sve je slično povezivanju u CSS datoteci.
Inline fontovi, izravno na elemente stranice. Evo nekoliko primjera:
Pričvršćivanje fonta odlomku
Evo odlomka s tekstom
Označite zasebnu riječ podebljanim slovima i dodijelite font odvojen od glavnog fonta
Ovdje je odlomak s tekstom, a ovo je riječ istaknuti podebljanim slovima
Evo linka
Slično, dodjeljujemo fontove bilo kojoj html oznaci.
Međutim, najbolje je i preporučljivo stilizirati elemente kroz CSS datoteku. Prvo, trebate samo jednom stilizirati CSS, a zatim HTML-u dodijeliti samo klasu koju želite. Drugo, pisanjem inline stilova stvara se duplikat sadržaja. Čini se da su ova svojstva i klase indeksirane od strane tražilica i čuo sam da W3C želi potpuno ukinuti inline. Iako je ponekad lakše pisati stilove na taj način.
Sve. Pratite ažuriranja stranice, pripremam članak o povezivanju nestandardnih i originalnih fontova na stranicu kako bi se ispravno prikazivali u svim preglednicima. Također ću vas upoznati s nekoliko dobrih servisa gdje možete birati nestandardne fontove.
Prilikom početka postavljanja izgleda potrebno je posebno u CSS-u navesti fontove koji se koriste na stranici. Često dizajner različitim fontovima upisuje ne samo glavni tekst stranice, već i razne naslove, logotipe, monograme:
Dobar dizajner, kao i dobar dizajner izgleda, zna da preglednik za prikaz stranice može koristiti samo fontove koji su instalirani na korisničkom računalu. Odnosno, fontovi se mogu grubo podijeliti u dvije kategorije:
- Fontovi koji će se bez problema prikazivati za veliku većinu korisnika.
- Fontovi koje nema dovoljno velika grupa korisnika.
Ako je dizajner upotrijebio tipove slova tipa 2 za izradu, na primjer, logotipa ili velikih statičkih naslova, ne biste trebali oklijevati upotrijebiti tu tehniku. Nedostatak korištenja ove tehnike je nefleksibilnost. U slučaju promjena u tekstu, morat ćete ponoviti sliku i promijeniti CSS (na primjer, ako dimenzije nove slike ne odgovaraju staroj).
Možemo reći da opasnost korištenja tehnike izravno ovisi o vjerojatnosti promjene teksta. Stoga se, na primjer, opći tekst stranice ne može napraviti nestandardnim fontovima! Kompetentan dizajner to nikada ne bi učinio. A ako dizajner dobije zelenu boju, dobar dizajner izgleda jednostavno je dužan ispraviti svoju pogrešku - u izgledu ovaj font zamijenite najsličnijim standardnim.
Ali kako možete razlikovati fontove prve grupe od druge? Jasno je da se ne možete osloniti na skup fontova instaliranih izravno na vašem računalu! Idemo to shvatiti.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju s operativnim sustavom. Budući da su operativni sustavi različiti, oni imaju različite skupove fontova. Popis standardnih fontova za različite verzije sustava Windows možete pronaći, na primjer, u članku Standardni fontovi za Windows, a popis standardnih fontova za Mac OS na stranici Fontovi koji se isporučuju s Mac OS-om. Što se tiče operativnih sustava Unix / Linux, oni nemaju niti jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, posebno na Ubuntu oni su instalirani prema zadanim postavkama. Prema statistikama s http://www.codestyle.org, mnogi korisnici Unixa/Linuksa također imaju instalirane skupove fontova URW, Free i druge. Prema istoj statistici, više od 60% korisnika Unixa/Linuksa na svojim računalima ima Core fontove za web, koji su do 2002. godine bili službeno dostupni za besplatno preuzimanje na web stranici Microsofta.
Kako bi stranica bila prikazana onako kako je dizajner zamislio, u bilo kojem operacijskom sustavu moguće je u svojstvu CSS-a navesti nekoliko fontova odvojenih zarezima.
Ovo svojstvo specificira prioritetni popis imena obitelji fontova i/ili generičkih imena obitelji. Prema CSS2 specifikaciji, postoje dvije vrste naziva obitelji fontova:
- Naziv obitelji fontova po izboru. Na primjer "Times new Roman", "Arial" i drugi. Nazivi obitelji fontova koji sadrže razmake moraju biti stavljeni u navodnike. Ako nedostaju navodnici, razmak ispred i iza naziva fonta zanemaruju se, a svaki slijed 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;
- cursive - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Dakle, za dizajn je uzet standardni font iz OS Windows, za njega je odabran sličan za Mac OS i Unix / Linux, postavljena je i spremna zajednička obitelj fontova.
Ali nije sve tako jednostavno. Kopajmo detaljnije.
Pronalaženje web-sigurnih fontova
Internet je kroz povijest bio poznat kao "sigurni" web fontovi. Siguran font je font koji je standardan na svim operativnim sustavima. Pošto se o takvom stanju može samo sanjati ne postoje apsolutno sigurni fontovi!
Neki se fontovi mogu nazvati sigurnima uz neka upozorenja.
Osnova za definiranje "sigurnih" fontova bili su fontovi najčešćeg Windows operacijskog sustava, koji se koriste i u drugim operacijskim sustavima. Primjer takve uporabe su već spomenuti Core fontovi za paket Web fontova, koji su, prema statistikama, preuzeli mnogi korisnici Unixa/Linuksa.
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, koja je važna za Runet.
Skup fontova uključenih u standardnu isporuku Mac OS X (ovaj OS je najčešći među korisnicima Mac OS-a) uključuje sve fontove u osnovnom skupu fontova za web.
Tako je na temelju Windows fontova korištenih u drugim operativnim sustavima formiran sljedeći popis takozvanih "sigurnih" web fontova:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nova
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Font Webdings sadrži skup ikona, tako da se ne može koristiti za sadržaj. Andale Mono se ne koristi široko jer je slabo prikladan za svakodnevno čitanje s ekrana i nemaju ga svi korisnici Windowsa.
Svi ovi fontovi dostupni su za svakog korisnika Windowsa, korisnika Mac OS X-a i veliku većinu korisnika Unixa/Linuksa (tj. onima koji imaju instalirane Core fontove za web).
Ali što je s ostatkom? Uostalom, želite da ideju dizajnera vidi što više korisnika!
O tome čitajte u drugom dijelu publikacije.
Ovaj popis sadrži fontove koji su zajednički za sve trenutne Windows operacijske sustave (zapravo, počevši od Windows 98), i njihove ekvivalente u Mac OS-u. Ovi se fontovi ponekad nazivaju "fontovima sigurnim u pregledniku" ( fontovi sigurni u pregledniku). Ovo je mala referenca koju koristim kada radim web stranice i mislim da će i vama biti od koristi.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 sjajnih fontova!" Činjenica je da preglednik posjetitelja može prikazati samo one fontove koji su instalirani u njegovom operacijski sustav ( cca. prevoditelj: u današnje vrijeme već je moguće koristiti gotovo sve fontove u dizajnu stranica i njegovom novom svojstvu @ font-face; 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 u svakom operativnom sustavu. Srećom, CSS ima svojstvo @ obitelj fontovašto olakšava ovaj zadatak.
Popis
| @ Vrijednost obitelji fonta | 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 |
| "Kurir Novi", Kurir, monospace | Kurir nova | Kurir Novo, Kurir 6 | jednoprostorni |
| Gruzija, serif | Gruzija 1 | Gruzija | serif |
| Impact, ugljen, sans-serif | Udarac | Udar 5, ugljen 6 | sans-serif |
| "Lucida Console", Monako, monospace | Lucida konzola | Monako 5 | jednoprostorni |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida bez Unicodea | Lucida grande | sans-serif |
| "Palatinska linotipija", "Knjiga 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 | Vremena | 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 | New York 6 | serif |
1 Georgia i Trebuchet MS fontovi se isporučuju sa sustavom Windows 2000 / XP i uključeni su u IE Font Pack (i doista dolaze s mnogim Microsoftovim aplikacijama), tako da su instalirani na mnogim Windows 98 računalima.
2 Fontovi simbola se prikazuju samo u Internet Exploreru, u drugim preglednicima obično se zamjenjuju standardnim fontom (iako se, na primjer, font Symbol prikazuje u Operi, a Webdings u Safariju).
3 Book Antiqua gotovo je identična Palatinskoj linotipi; Palatino Linotype se isporučuje sa sustavom Windows 2000 / XP, a Book Antiqua se isporučuje s Windows 98.
4 Imajte na umu da ovi fontovi nisu TrueType, već bitmap fontovi, pa 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 standardnom stilu u Safariju, ali ne rade podebljani ili kurziv. Comic Sans MS također radi podebljano, ali ne i kurziv. Čini se da drugi Mac preglednici sami dobro oponašaju svojstva koja nedostaju (hvala Christianu Fecteauu na savjetu).
6 Ovi se fontovi instaliraju na Mac samo tijekom klasične instalacije
Snimke zaslona
- Mac OS X 10.4.8, Firefox 2.0, ClearType omogućen (hvala Juris Vecvanags 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 Eric Zavesky na snimci zaslona)
- Windows Vista, Internet Explorer 7, ClearType omogućen
- Windows Vista, Firefox 2.0, ClearType omogućen (hvala Michielu Bijlu na snimci zaslona)
Prilikom početka postavljanja izgleda potrebno je posebno u CSS-u navesti fontove koji se koriste na stranici. Često dizajner različitim fontovima upisuje ne samo glavni tekst stranice, već i razne naslove, logotipe, monograme.
Dobar dizajner, kao i dobar dizajner izgleda, zna da preglednik za prikaz stranice može koristiti samo fontove koji su instalirani na korisničkom računalu. Odnosno, fontovi se mogu grubo podijeliti u dvije kategorije:
- Fontovi koji će se bez problema prikazivati za veliku većinu korisnika.
- Fontovi koje nema dovoljno velika grupa korisnika.
Ako je dizajner upotrijebio fontove tipa 2 za izradu, na primjer, logotipa ili velikih statičkih naslova, možete slobodno koristiti metodu zamjene teksta slikom. Nedostatak korištenja ove tehnike je nefleksibilnost. U slučaju promjena 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 korištenja tehnike izravno ovisi o vjerojatnosti promjene teksta. Stoga se, na primjer, opći tekst stranice ne može napraviti nestandardnim fontovima! Kompetentan dizajner to nikada ne bi učinio. A ako dizajner dobije zelenu boju, dobar dizajner izgleda jednostavno je dužan ispraviti svoju pogrešku - u izgledu ovaj font zamijenite najsličnijim standardnim.
Ali kako možete razlikovati fontove prve grupe od druge? Jasno je da se ne možete osloniti na skup fontova instaliranih izravno na vašem računalu! Idemo to shvatiti.
Standardni fontovi
Standardni fontovi su skup fontova koji se instaliraju s operativnim sustavom. Budući da su operativni sustavi različiti, oni imaju različite skupove fontova. Popis standardnih fontova za različite verzije sustava Windows možete pronaći, na primjer, u članku Standardni fontovi za Windows, a popis standardnih fontova za Mac OS na stranici Fontovi koji se isporučuju s Mac OS-om. Što se tiče operativnih sustava Unix / Linux, oni nemaju niti jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, posebno na Ubuntu oni su instalirani prema zadanim postavkama. Prema statistikama s http://www.codestyle.org, mnogi korisnici Unixa/Linuksa također imaju instalirane skupove fontova URW, Free i druge. Prema istoj statistici, više od 60% korisnika Unixa/Linuksa na svojim računalima ima Core fontove za web, koji su do 2002. godine bili službeno dostupni za besplatno preuzimanje na web stranici Microsofta.
Kako bi stranica bila prikazana onako kako je dizajner zamislio, u bilo kojem operacijskom sustavu moguće je navesti nekoliko fontova u svojstvu obitelji fontova CSS, odvojenih zarezima.
Ovo svojstvo specificira prioritetni popis imena obitelji fontova i/ili generičkih imena obitelji. Prema CSS2 specifikaciji, postoje dvije vrste naziva obitelji fontova:
- Naziv obitelji fontova po izboru. Na primjer "Times new Roman", "Arial" i drugi. Nazivi obitelji fontova koji sadrže razmake moraju biti stavljeni u navodnike. Ako nedostaju navodnici, razmak ispred i iza naziva fonta zanemaruju se, a svaki slijed 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;
- cursive - kurzivni fontovi;
- fantazija - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Generička prezimena su ključne riječi i ne moraju se navoditi.
Dakle, za dizajn je uzet standardni font iz OS Windows, za njega je odabran sličan za Mac OS i Unix / Linux, postavljena je i spremna zajednička obitelj fontova.
Ali nije sve tako jednostavno. Kopajmo detaljnije.
Pronalaženje web-sigurnih fontova
Internet je kroz povijest bio poznat kao "sigurni" web fontovi. Siguran font je font koji je standardan na svim operativnim sustavima. Budući da se o takvom stanju može samo sanjati, ne postoje apsolutno sigurni fontovi!
Određeni fontovi se mogu nazvati sigurnima uz neka upozorenja.
Osnova za definiranje "sigurnih" fontova bili su fontovi najčešćeg Windows operacijskog sustava, koji se koriste i u drugim operacijskim sustavima. Primjer takve uporabe su već spomenuti Core fontovi za paket Web fontova, koji su, prema statistikama, preuzeli mnogi korisnici Unixa/Linuksa.
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, koja je važna za Runet.
Skup fontova uključenih u standardnu isporuku Mac OS X (ovaj OS je najčešći među korisnicima Mac OS-a) uključuje sve fontove u osnovnom skupu fontova za web.
Tako je na temelju Windows fontova korištenih u drugim operativnim sustavima formiran sljedeći popis takozvanih "sigurnih" web fontova:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nova
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
Font Webdings sadrži skup ikona, tako da se ne može koristiti za sadržaj. Andale Mono se ne koristi široko jer je slabo prikladan za svakodnevno čitanje s ekrana i nemaju ga svi korisnici Windowsa.
Svi ovi fontovi dostupni su za svakog korisnika Windowsa, korisnika Mac OS X-a i veliku većinu korisnika Unixa/Linuksa (tj. onima koji imaju instalirane Core fontove za web).
Ali što je s ostatkom? Uostalom, želite da ideju dizajnera vidi što više korisnika!
Ćirilični fontovi
Specifična značajka Runeta je problem s kodiranjem stranica i podrškom za ćirilicu u fontovima. Kako bi izbjegli probleme s raznim 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 ćirilično pismo.
Ispod je tablica korespondencije fontova.
| Windows | Mac OS | Unix / Linux | Obitelj predaka |
|---|---|---|---|
| Arial crna | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako CY | * (Pogledaj ispod) | rukopisni |
| Kurir nova | * (Pogledaj ispod) | Nimbus Mono L | Monoprostor |
| Gruzija | * (Pogledaj ispod) | Stoljeća školska knjiga L | Serif |
| Udarac | Drveni ugljen CY | * (Pogledaj ispod) | Sans-serif |
| Times New Roman | Times CY | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica CY | * (Pogledaj ispod) | Sans-serif |
| Verdana | Ženeva CY | DejaVu Sans | Sans-serif |
* u stupcu nasuprot fontu znači da operativni sustav nema izvorne ćirilične ekvivalente Windowsa. No, istodobno postoji velika vjerojatnost da je sam ovaj font instaliran izravno u operacijski sustav.
Na primjer, ako je glavni tekst izgleda Arial, nalazimo ovaj font u tablici i upisujemo odgovarajući redak u CSS:
tijelo (familija fontova: 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 imaju ga svi korisnici Windowsa i svi korisnici Mac OS X-a), tada će stranica biti prikazana u ovom fontu. Ako korisnik nema ovaj font, tada će stranica ruskog govornog korisnika Mac OS-a 9 biti točno prikazana u standardnom fontu sustava Helvetica CY, a za korisnika Unix / Linuxa bit će prikazana u Nimbus Sans L font, koji instalira 90% korisnika Unixa/Linuksa. Ako je korisnik Unixa / Linuxa unutar 10% koji nema ovaj font, tada će stranica biti prikazana u zadanom serif fontu za pregledavanje weba.
Osim što tablica uzima u obzir Unix/Linux fontove, tu je i čudna CY ikona nakon uobičajene Helvetice. Hajde da shvatimo što je to!
Prije izlaska Mac OS X-a ova linija je imala sljedeće značenje: za korisnike Windowsa prikazujemo stranicu Arial, za korisnike Mac OS 9 u standardnom Helvetica fontu, a ostali vide stranicu sa sustavom bez -serif font postavljen prema zadanim postavkama 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 Helvetica fontu, koji prikazuje nečitljive informacije, a ostali vide stranicu sa sustavom bez- serif font postavljen prema zadanim postavkama u pregledniku.
Za ispravan prikaz ovog skupa za korisnike Mac OS 9 umjesto nećirilizirane Helvetice, ima smisla navesti isti standard za Mac OS 9 Helvetica CY font koji sadrži ćirilicu.
Čitanje ravnala promijenilo se od izlaska Mac OS X-a. Jedan uobičajeni standardni font sada je određen za Windows / Mac OS X. A ako želimo da korisnici Mac OS-a 9 mogu vidjeti ideju dizajnera, moraju u liniju fonta napisati font koji sadrži ćirilicu.
Dakle, iako ne postoje sigurni fontovi, postoje sigurni fontovi. Također se zovu CSS hrpe fontova... Uz standardne fontove za Windows / Mac OS X, ovi redovi mogu uključivati i ekvivalentne fontove iz standardnog skupa Mac OS 9 (koji prema zadanim postavkama ne sadrži "sigurne" fontove) i uobičajene Unix / Linux fontove.
Svaki slagač prije ili kasnije naiđe na trenutak kada dizajner koristi font u izgledu koji nije uvršten na popis "sigurnih"; Ali to nije razlog za uzbunu! Na primjer, dizajneri često koriste font Tahoma na svojim izgledima, koji nije uključen na ovaj popis. Pravilno konstruirana linija fontova otvara mogućnost korištenja ne samo Tahoma, već i drugih fontova. Sve više dizajnera iskorištava ovu priliku i kompetentan dizajner izgleda toga bi trebao biti svjestan.
Ispod je dodatna tablica fontova koji nisu uključeni u popis "sigurnih", ali se mogu koristiti na izgledima.
| Windows | Mac OS | Obitelj predaka |
|---|---|---|
| Lucida konzola | Monako | Monoprostor |
| Lucida bez Unicodea | Lucida grande | Sans-serif |
| Tahoma | Ženeva CY | Sans-serif |
A ako bez ćirilice?
Za tekstove na engleskom jeziku gornje tablice imaju malo drugačiji izgled.
| Windows | Mac OS | Unix / Linux | Obitelj predaka |
|---|---|---|---|
| Arial crna | Gadget | Nimbus sans l | Sans-serif |
| Arial | Helvetica | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako | TSCu_Comic | rukopisni |
| Kurir nova | Kurir | Nimbus Mono L | Monoprostor |
| Gruzija | * (Pogledaj ispod) | Stoljeća školska knjiga L | Serif |
| Udarac | Drveni ugljen | Rekha | Sans-serif |
| Times New Roman | Vremena | 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 bolje je prvo navesti font za Unix/Linux, a zatim za Mac OS prilikom sastavljanja ravnala. To je zbog neke zakrivljenosti skupa jezgrenih fontova Linux X11.
Fontove koji nisu na "sigurnom" popisu, ali se mogu koristiti u izgledima najbolje je definirati pomoću CSS fontova na temelju ove tablice.
| Windows | Mac OS | Unix / Linux | Obitelj predaka |
|---|---|---|---|
| Lucida konzola | Monako | - | Monoprostor |
| Lucida bez Unicodea | Lucida grande | Garuda | Sans-serif |
| Palatinska linotipija | Palatino | Garuda ** | Sans-serif |
| Tahoma | Ženeva | Kalimati | Sans-serif |
Crtica u Unix / Linux okviru označava da će korisnici tih operacijskih sustava vjerojatno vidjeti zadani font za prikaz stranica na stranici.
** U ovom redu ima smisla staviti Garudu ispred Palatina (vidi gore objašnjenje).
Zaključci:
- Ne postoje potpuno sigurni fontovi. Sljedeći se fontovi mogu nazvati uvjetno sigurnima:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nova
- Gruzija
- Udarac
- Times New Roman
- Trebuchet MS
- Verdana
- Sigurne CSS grupe koje 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, upotrijebite CSS hrpe iz članka.
