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.
Veoma su laki za upotrebu. 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 u CSS! Cijeli proces nije trajao više od 60 sekundi. I sve je potpuno besplatno.
Šta bi moglo biti pogrešno?
Neki fontovi možda neće biti 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 rezervnu opciju.
Koliko je važno korištenje sigurnih web fontova?
Svaki uređaj ima svoj vlastiti set unaprijed instaliranih fontova. Koji zavisi od operativnog sistema. Problem je što postoje male razlike između to dvoje.
A sajtovi? Na primjer, ovaj? Font koji vidite možda nije onaj koji je originalno napisan za stranicu.
Šta to znači? Recimo da je dizajner odabrao porodicu plaćenih fontova za stranicu. Ako ih nemate instalirane i ne pruža ih poseban web servis, onda je font koji vidite jedna od standardnih opcija. Na primjer, Times New Roman.
Stoga, kako na vašem ekranu tekst može izgledati jednostavno užasno.
I ovdje standardni fontovi za sajt dostupan je u svim operativnim sistemima. Ovo je mala kolekcija dostupna za Windows, Mac, Google, kao i Unix i Linux.
Sa ovom kolekcijom, dizajneri kao i vlasnici sajtova mogu odrediti koji font treba koristiti kao rezervni. Tako postaje moguće kontrolirati kako će stranica izgledati na različitim uređajima.
Kao zamjenu, programer odabire font koji je vrlo sličan originalnom i bić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 isjeckani fontovi ( koji nemaju serife na vrhovima slova). Često se koristi u Windows-u za zamjenu drugih znakova.
Helvetica
Helvetica je spas za dizajnere. Ovo standardni web font radi skoro 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.
Times
CSS standardni font Tajms je većini poznat. Mnogi ga se sjećaju po malim slovima u uskim stupcima starih novina. Najčešća vrsta štampe koja je postala tradicija.
Kurir nov
Slično Times New Romanu i korišteno kao varijacija na stare klasike. Takođe se smatra monorazrednim fontom. Za razliku od serif i sans serif fontova, svi njegovi znakovi su iste širine.
Kurir
Stari font fiksne širine koji se koristi kao rezervni font na gotovo svim uređajima i operativnim sistemima.
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.
Georgia
Standardni Georgia web font je sličan po obliku i veličini fontu Verdana. Njegovi znakovi su veći od drugih fontova iste veličine. Ali bolje je ne koristiti ga u tandemu s drugima. Isti Times New Roman, u poređenju sa njim, izgleda kao patuljak.
Palatino
Palatino datira 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. veku u Parizu. Njegova nova i poboljšana verzija je uključena u standardni set u većini Windows uređaja. Kasnije su ovaj font usvojili i drugi operativni sistemi.
Bookman
Bookman ( ili Bookman Old Style) - jedan od najbolji standardni fontovi za naslove. Njegova karakteristična karakteristika 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 prvobitno razvio Microsoft sredinom devedesetih. Korišćen je u Windows XP-u. Danas se koristi za sastavljanje glavnog teksta.
Arial crna
Analogno standardni font za sajt Arial. Istina, veći je, deblji i čvršći. Sličan je proporcionalno fontu Helvetica. I da li je važno. Oni mogu uspješno zamijeniti Helveticu bez kupovine licence.
Uticaj
Još jedan sjajan font za izdvajanje naslova. Izgleda dobro u kratkim, nekoliko riječi, kao iu 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 sa web stranicom, nazivaju se i sistemskim fontovima, a u sljedećem članku ćemo se detaljnije 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. Stoga se zovu sistemski i instaliraju se prema zadanim postavkama zajedno sa operativnim sistemom.
I oni se nazivaju sigurnim fontovima, jer će se najvjerovatnije prikazati u pretraživaču većini posjetitelja stranice.
Ali cijeli problem je u tome što su različiti skupovi fontova instalirani na različitim operativnim sistemima. Možete pogledati skupove isporučenih fontova zajedno sa operativnim sistemom na zvaničnim stranicama Windows, Mac OS. A u Unixu / Linuxu uopće nema standardnog skupa.
Kako bi web stranica bila prikazana u skladu sa idejom dizajnera, u CSS-u je postavljeno svojstvo fonta pod nazivom font-family.
Svojstvo porodice fontova
Svojstvo font-family je porodica fontova grupirana prema specifičnim kriterijumima.
Generičke porodice:
- serif - fontovi sa serifima na krajevima;
- sans-serif - sans serif fontovi;
- cursive - kurzivni fontovi;
- fantasy - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Stoga se slični fontovi iz različitih operativnih sistema jednostavno biraju i povezuju na internet stranicu odvojeni zarezima.
Evo primjera, samo za vizualnu percepciju. Vratit ćemo se na ovaj primjer kada pogledamo direktnu vezu fontova.
Samo slijedite logiku i sve će postati kristalno jasno.
Tijelo (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;)
Hajde da analiziramo šta je napisano:
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix / Linux - Nimbus Sans L;
- Generička porodica je sans-serif.
Takozvani sigurni fontovi
Na osnovu Windows OC-a, sastavljena je lista nekoliko sigurnih fontova.
- Arial
- Arial crna
- Comic Sans MS
- Kurir nov
- 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.
Za ostale korisnike obezbeđena je tabela korespondencije. Sadrži izbor sličnih fontova koji pripadaju određenoj porodici.
Tabela korespondencije i pripadnost fontova određenoj porodici:
| Windows | Mac OS | Unix / Linux | Porodica predaka |
|---|---|---|---|
| Arial crna | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako CY | * (vidi ispod) | cursive |
| Kurir nov | * (vidi ispod) | Nimbus Mono L | Monospace |
| Georgia | * (vidi ispod) | Century Schoolbook L | Serif |
| Uticaj | Charcoal CY | * (vidi ispod) | Sans-serif |
| Times New Roman | Times CY | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica CY | * (vidi ispod) | Sans-serif |
| Verdana | Geneva CY | DejaVu Sans | Sans-serif |
* Kada povezujete fontove, možete se sigurno osloniti na to. Tabela podržava ćirilično pismo, rusko pismo.
Uzeo sam samu tabelu u ovom članku.
Povezivanje sistemskih fontova sa sajtom
Postoji nekoliko načina za povezivanje sistemskih fontova sa web lokacijom. Osim toga, možete povezati različite fontove s različitim paragrafima. Primijenite različite fontove na određene riječi i fraze. Sve ovo ću sada pokušati da razmotrim.
Pa hajde da sve to dovedemo u red.
Povezivanje fontova u CSS fajlu
Ako trebate da se povežete osnovni font za cijeli dokument, samo trebate dodati sljedeći kod u stylesheet:
Body (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 - bold * /)
Font dodjeljujemo samo paragrafima:
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 pasuse * /)
To dodijelite font samo određenom pasusu, ili blok, prvo morate dodijeliti klasu ovom bloku u HTML dokumentu
Evo paragrafa sa fontom koji se može dodijeliti
I u CSS tabeli upišite sljedeći kod:
Font (familija fontova: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * povežite font sa određenim paragrafima, 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 pasuse * /)
Sada će svakom tag-u - 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 direktno sa HTML dokumentom na isti način kao i CSS fajl, jedina razlika je u sintaksi. Možete povezati fontove u naslovu dokumenta - između oznaka
(slično CSS fajlu), ili inline - dodeljivanje svojstava direktno html tagovima.Uključujemo fontove u zaglavlje, 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.
Inline fontovi, direktno na elemente stranice. Evo nekoliko primjera:
Pričvršćivanje fonta na pasus
Evo pasusa sa tekstom
Označite odvojenu riječ podebljanim slovima i dodijelite font odvojen od glavnog fonta
Evo jednog pasusa sa 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, kreira se duplirani sadržaj. Ova svojstva i klase, čini se, indeksiraju pretraživači 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 prikazali u svim pretraživačima. Također ću vas upoznati sa nekoliko dobrih servisa gdje možete odabrati nestandardne fontove.
Kada počnete da postavljate raspored, potrebno je posebno navesti fontove koji se koriste na stranici u CSS-u. Često dizajner različitim fontovima ukucava ne samo glavni tekst stranice, već i razne naslove, logotipe, monograme:
Dobar dizajner, kao i dobar dizajner izgleda, zna da pretraživač može koristiti samo fontove koji su instalirani na korisnikovom računaru za prikaz stranice. Odnosno, fontovi se mogu grubo podijeliti u dvije kategorije:
- Fontovi koji će biti prikazani bez problema za veliku većinu korisnika.
- Fontovi koje nema dovoljno velika grupa korisnika.
Ako je dizajner koristio tipove slova tipa 2 za kreiranje, na primjer, logotipa ili velikih statičnih naslova, ne biste trebali oklijevati da koristite ovu tehniku. Nedostatak korištenja ove tehnike je nefleksibilnost. U slučaju 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 se napraviti nestandardnim fontovima! Kompetentan dizajner to nikada ne bi uradio. A ako dizajner dobije zelenu boju, dobar dizajner izgleda jednostavno je dužan ispraviti svoju grešku - u izgledu zamijeniti ovaj font 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 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, oni imaju različite skupove fontova. 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 koji se isporučuju s Mac OS-om. Što se tiče Unix/Linux operativnih sistema, oni nemaju ni jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, posebno na Ubuntu-u oni su instalirani po defaultu. Prema statistikama sa http://www.codestyle.org, mnogi korisnici Unixa/Linuksa takođe imaju instalirane URW, Free i druge setove fontova. Prema istoj statistici, više od 60% korisnika Unixa/Linuksa ima Core fontove za Web na svojim računarima, 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, u bilo kojem 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 fontova po izboru. Na primjer "Times new Roman", "Arial" i drugi. Imena porodica fontova koja sadrže razmake moraju biti stavljena u navodnike. Ako nedostaju navodnici, svi razmakni znakovi 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;
- fantasy - 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 porodica fontova.
Ali nije sve tako jednostavno. Hajde da kopamo detaljnije.
Pronalaženje Web sigurnih fontova
Internet je kroz istoriju bio poznat kao “sigurni” web fontovi. Bezbedan font je font koji je standardan na svim operativnim sistemima. Pošto se o takvom stanju može samo sanjati ne postoje apsolutno sigurni fontovi!
Određeni fontovi se mogu nazvati sigurnim uz određena upozorenja.
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/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 ćirilično pismo, što je važno za Runet.
Skup fontova uključenih u standardnu isporuku Mac OS X-a (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 osnovu Windows fontova koji se koriste u drugim operativnim sistemima, formirana sljedeća lista takozvanih "sigurnih" web fontova:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nov
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
Webdings font sadrži skup ikona, tako da se ne može koristiti za sadržaj. Andale Mono se ne koristi široko jer nije pogodan za svakodnevno čitanje sa 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 šta je sa ostatkom? Na kraju krajeva, želite da ideju dizajnera vidi što više korisnika!
O tome čitajte u drugom dijelu publikacije.
Ova lista sadrži fontove koji su zajednički za sve trenutne Windows operativne sisteme (u stvari, počevši od Windows 98), i njihove ekvivalente u Mac OS-u. Ovi fontovi se ponekad nazivaju "fontovima sigurnim u pretraživaču" ( bezbedni fontovi u pretraživaču). Ovo je mala referenca koju koristim kada pravim 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 bio ograničen na tako mali skup fontova? Imam ogromnu kolekciju sjajnih fontova!" Činjenica je da pretraživač posjetitelja može prikazati samo one fontove koji su instalirani u njegovom operativni sistem ( cca. prevodilac: u sadašnjem trenutku već je moguće koristiti gotovo sve fontove u dizajnu stranica i njihovim novim svojstvima @ 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 u svakom operativnom sistemu. Na sreću, CSS ima svojstvo @ font-family to olakšava ovaj zadatak.
Lista
| @ Vrijednost porodice fonta | Windows | Mac | Porodica |
|---|---|---|---|
| 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 | cursive |
| "Courier New", Kurir, monospace | Kurir nov | 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 Georgia i Trebuchet MS fontovi se isporučuju sa Windows 2000 / XP i uključeni su u IE Font Pack (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 Book Antiqua je gotovo identična Palatino Linotipi; Palatino Linotype se isporučuje sa Windows 2000 / XP, a Book Antiqua se isporučuje sa Windows 98.
4 Imajte na umu da ovi fontovi nisu TrueType, već bitmap fontovi, tako da mogu izgledati loše u nekim veličinama (dizajnirani su da se prikazuju pri 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 pretraživači sami dobro oponašaju svojstva koja nedostaju (hvala Christianu Fecteauu na savjetu).
6 Ovi fontovi se instaliraju na Mac samo tokom klasične instalacije
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 postavljate raspored, potrebno je posebno navesti fontove koji se koriste na stranici u CSS-u. Često dizajner različitim fontovima ukucava ne samo glavni tekst stranice, već i razne naslove, logotipe, monograme.
Dobar dizajner, kao i dobar dizajner izgleda, zna da pretraživač može koristiti samo fontove koji su instalirani na korisnikovom računaru za prikaz stranice. Odnosno, fontovi se mogu grubo podijeliti u dvije kategorije:
- Fontovi koji će biti prikazani bez problema za veliku većinu korisnika.
- Fontovi koje nema dovoljno velika grupa korisnika.
Ako je dizajner koristio fontove tipa 2 za kreiranje, 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 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 se napraviti nestandardnim fontovima! Kompetentan dizajner to nikada ne bi uradio. A ako dizajner dobije zelenu boju, dobar dizajner izgleda jednostavno je dužan ispraviti svoju grešku - u izgledu zamijeniti ovaj font 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 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, oni imaju različite skupove fontova. 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 koji se isporučuju s Mac OS-om. Što se tiče Unix/Linux operativnih sistema, oni nemaju ni jedan skup fontova. Mnogi korisnici Linuxa koriste skup fontova DejaVu, posebno na Ubuntu-u oni su instalirani po defaultu. Prema statistikama sa http://www.codestyle.org, mnogi korisnici Unixa/Linuksa takođe imaju instalirane URW, Free i druge setove fontova. Prema istoj statistici, više od 60% korisnika Unixa/Linuksa ima Core fontove za Web na svojim računarima, 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, u bilo kojem operativnom sistemu, moguće je navesti nekoliko fontova u svojstvu porodice fontova CSS, 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 fontova po izboru. Na primjer "Times new Roman", "Arial" i drugi. Imena porodica fontova koja sadrže razmake moraju biti stavljena u 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;
- fantasy - ukrasni fontovi;
- monospace - monospace font (sa slovima iste širine).
Generička porodična imena 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 porodica fontova.
Ali nije sve tako jednostavno. Hajde da kopamo detaljnije.
Pronalaženje Web sigurnih fontova
Internet je kroz istoriju bio poznat kao “sigurni” web fontovi. Bezbedan font je font koji je standardan na svim operativnim sistemima. Pošto se o takvom stanju može samo sanjati, apsolutno sigurnih fontova ne postoje!
Određeni fontovi se mogu nazvati sigurnim uz određena upozorenja.
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/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 ćirilično pismo, što je važno za Runet.
Skup fontova uključenih u standardnu isporuku Mac OS X-a (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 osnovu Windows fontova koji se koriste u drugim operativnim sistemima, formirana sljedeća lista takozvanih "sigurnih" web fontova:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nov
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
Webdings font sadrži skup ikona, tako da se ne može koristiti za sadržaj. Andale Mono se ne koristi široko jer nije pogodan za svakodnevno čitanje sa 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 šta je sa ostatkom? Na kraju krajeva, želite da ideju dizajnera vidi što više korisnika!
Ćirilični fontovi
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 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 tabela korespondencije fontova.
| Windows | Mac OS | Unix / Linux | Porodica predaka |
|---|---|---|---|
| Arial crna | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako CY | * (vidi ispod) | cursive |
| Kurir nov | * (vidi ispod) | Nimbus Mono L | Monospace |
| Georgia | * (vidi ispod) | Century Schoolbook L | Serif |
| Uticaj | Charcoal CY | * (vidi ispod) | Sans-serif |
| Times New Roman | Times CY | Nimbus rimski br.9 L | Serif |
| Trebuchet MS | Helvetica CY | * (vidi ispod) | Sans-serif |
| Verdana | Geneva CY | DejaVu Sans | Sans-serif |
* u koloni nasuprot fontu znači da operativni sistem nema izvorne ćirilične ekvivalente Windows-a. 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-a 9 biti točno prikazana u standardnom Helvetica CY sistemskom fontu, a za Unix / Linux korisnika će biti prikazana u Nimbus Sans L font, koji instalira 90% korisnika Unixa/Linuksa. Ako je Unix/Linux korisnik unutar 10% koji nema ovaj font, tada će stranica biti prikazana u zadanom serif fontu za pretraživanje weba.
Pored činjenice da tabela uzima u obzir Unix / Linux fontove, tu je i čudna CY ikona nakon uobičajene Helvetica. Hajde da shvatimo šta je to!
Prije izlaska Mac OS X-a, ova linija je imala sljedeće značenje: za korisnike Windows-a prikazujemo stranicu Arial, za korisnike Mac OS-a 9 u standardnom Helvetica fontu, a ostali vide stranicu sa sistemom bez- serif font postavljen prema zadanim postavkama 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 Windows-a prikazujemo stranicu Arial, za korisnike Mac OS-a 9 - u standardnom Helvetica fontu, koji prikazuje nečitljive informacije, a ostali vide stranicu sa sistemom bez- serif font postavljen prema zadanim postavkama 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 Helvetica CY font koji sadrži ćirilicu.
Čitanje ravnala se promijenilo od objavljivanja Mac OS X-a. Jedan uobičajeni standardni font je sada određen za Windows / Mac OS X. A ako želimo da korisnici Mac OS 9 mogu da vide ideju dizajnera, potrebno je da napišu font koji sadrži ćirilicu u liniji fonta.
Dakle, iako ne postoje sigurni fontovi, postoje sigurni fontovi. Takođe se zovu CSS fontovi... Pored standardnih Windows / Mac OS X fontova, ovi redovi mogu uključivati i ekvivalentne fontove iz standardnog Mac OS 9 skupa (koji podrazumevano 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 rasporedu koji nije uključen u listu „sigurnih“; Ali ovo nije razlog za uzbunu! Na primjer, dizajneri često koriste Tahoma font na svojim 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 više i više dizajnera koristi ovu priliku i kompetentan dizajner izgleda toga bi trebao biti svjestan.
Ispod je dodatna tabela fontova koji nisu uključeni u listu "sigurnih", ali se mogu koristiti na izgledima.
| Windows | Mac OS | Porodica predaka |
|---|---|---|
| Lucida Console | Monako | Monospace |
| Lucida Sans Unicode | Lucida grande | Sans-serif |
| Tahoma | Geneva CY | Sans-serif |
A ako bez ćirilice?
Za tekstove na engleskom jeziku gornje tabele imaju malo drugačiji izgled.
| Windows | Mac OS | Unix / Linux | Porodica predaka |
|---|---|---|---|
| Arial crna | Gadget | Nimbus sans l | Sans-serif |
| Arial | Helvetica | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monako | TSCu_Comic | cursive |
| Kurir nov | 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, bolje je prvo navesti font za Unix/Linux, a zatim za Mac OS prilikom sastavljanja lenjira. To je zbog neke zakrivljenosti Linux X11 jezgrenog skupa fontova.
Fontove koji nisu na "sigurnoj" listi, ali se mogu koristiti u izgledima, najbolje je definisati pomoću CSS fontova na osnovu ove tabele.
| Windows | Mac OS | Unix / Linux | Porodica predaka |
|---|---|---|---|
| Lucida Console | Monako | - | Monospace |
| Lucida Sans Unicode | Lucida grande | Garuda | Sans-serif |
| Palatinska linotipija | Palatino | Garuda ** | Sans-serif |
| Tahoma | Ženeva | Kalimati | Sans-serif |
Crtica u polju Unix/Linux označava da će korisnici tih operativnih sistema vjerovatno vidjeti zadani font za prikaz stranica na stranici.
** U ovom redu, ima smisla staviti Garuda ispred Palatina (vidi objašnjenje iznad).
Zaključci:
- Ne postoje potpuno sigurni fontovi. Sljedeći fontovi se mogu nazvati uslovno sigurnima:
- Arial
- Arial crna
- Comic Sans MS
- Kurir nov
- Georgia
- Uticaj
- Times New Roman
- Trebuchet MS
- Verdana
- Sigurni CSS stekovi 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, koristite CSS stekove iz članka.
