Učenje o svemu samostalno nije lako, ali je vrlo zanimljivo. Ako barem površno razumijete kako web stranica radi, onda je za implementaciju vašeg projekta bolje to učiniti sami. Na taj način nećete samo uštedjeti mnogo novca, već ćete i naučiti mnogo "čipova", tajni itd. Korištenje Google fontova obično ne privlači pažnju, iako zahvaljujući njima blog može postati mnogo zanimljiviji.

Service

Prilično davno, na internetu se pojavila velika usluga web fontova. Razvio ga je Google. Korisnici su ga mogli koristiti besplatno. Unatoč činjenici da se ova vrsta postavljanja ne smatra super teškom, još uvijek je bilo ljudi koji su pogriješili i nisu se mogli nositi s uslugom.

Za to je posebno razvijen jednostavan dizajn. Google fontovi sada su lakši za rad s većim brojem posjetitelja. Biblioteka se takođe proširila. Prošle je godine usluga redizajnirana i dobila je mnoge pozitivne kritike. Sada je ljudima lakše povezivati ​​se i pregledavati fontove na svojim web stranicama.

Izgled

Dakle, za one koji nikada nisu bili na web stranici sa starim dizajnom, morate dobiti opću sliku o promjenama. Usluga je u prošlosti izgledala prilično masovno. Svuda su bili debeli okviri, privlačni plavi gumbi, grafika nije bila najveće rezolucije. Sve je to uvelike utjecalo na posjetitelja.

Sada su se programeri fokusirali na materijalni dizajn. Sve je steklo sofisticirana svojstva. Izgled je postao "svjetliji". Suptilna animacija i interaktivnost postali su uočljivi. Ništa više ne odvlači pažnju od odabira pravih Google fontova.

Pojavila se prikladna prilagodba resursa za mobilne uređaje. Naravno, takva promjena nije jako uočljiva u pozadini inovacija, ali uzimajući u obzir greške prethodne verzije, postat će "nebeska mana" za strastvene korisnike.

Prilika

Dizajneri često koriste ovu uslugu. Unatoč svom iskustvu i profesionalizmu, oni rade i s vizualizacijom. Redizajn je predstavio više ovih funkcija, što bi vam omogućilo da unaprijed kombinirate ono što će biti potrebno implementirati kasnije u vašem projektu.

Stoga je problem s načinom na koji se jedan font kombinira s drugom bojom i trećom pozadinom nestao. Kompanija je web stranici dodala više alata i paletu s univerzalnim tonovima, što će vam omogućiti da eksperimentirate i saznate kako bi određeni font izgledao u određenoj boji.

Favorites

Usluga Google Fontovi korisnicima nudi izbor njihovih favorita. Posebna kartica sadrži skup stilova koje programer preporučuje za upotrebu. Ove kolekcije se izdvajaju od ostalih. Razvijaju ih stručnjaci iz Googlea i agencija trećih strana. Većina njih ima određeni stil i posebnu filozofiju.

View

Jedna od važnih promjena izravno je utjecala na izbor fontova. To znači da je ranije korisnik vidio ispred sebe određeni crtež s dodatnim gumbima i velikom plavom bojom, koji je dodao font u zbirku. Općenito, ova je opcija izgledala dobro, ali okvir nije uvijek imao dovoljno dobru rezoluciju slike sa stilom, pa je bilo teško nedvosmisleno odrediti kako će font izgledati.

Bilo je i pitanja o ovim dodatnim gumbima, o kojima se na prvi pogled malo znalo. Bilo ih je potrebno ili usmjeriti ili upotrijebiti. Sada je sve postalo manje -više jasno. Pojavile su se dodatne funkcije:

• Odaberite određenu rečenicu, odlomak ili vlastiti tekstualni element.
• Eksperimentirajte s težinom slova.
• Brzo podešavanje veličine pomoću klizača.

Usput, Googleova promjena veličine fonta sada je osjetljivija jer se promijenio samo jedan primjer, a ne sve na stranici. U staroj verziji korisnici su mogli prelaziti s jedne strane stranice na drugu, ali u novoj verziji jednostavno ostajete na primjeru koji prilagođavate.

Veza

Ako ste spremni koristiti ovu uslugu, možete pokušati povezati fontove sa svojim resursom. Sam proces dobijanja veze je univerzalan. Problemi mogu nastati ovisno o vašem CMS sistemu. Svaki od njih koristi svoje metode. Stoga ćete za različite projekte morati odabrati zasebne opcije.

Pogledat ćemo kako doći do veze za povezivanje Google fontova. Morate otići na službenu web lokaciju Google Fontovi. Tamo pregledavate katalog stilova i odabirete onaj koji najbolje odgovara vašim potrebama. Da biste to učinili, kliknite znak plus pored njega. Nakon toga, font će biti dodan u poseban blok na samom dnu stranice.

Kliknite na ovaj blok i dodatno ga prilagodite. Ovdje možete odabrati stilove i željenu abecedu. Ako vam trebaju Google ćirilični fontovi, provjerite ćiriličnu liniju. Nakon toga će se generirati veza. Može se pronaći u istom prozoru na kartici Ugradi. Samo ga trebate kopirati ili upotrijebiti cijeli HTML kôd.

Obično u postavkama web mjesta postoje postavke za fontove i boje. Postoje standardne opcije, a možete dodati napredne. Oni sadrže zasebnu opciju za Google Fontove. Ako vaši tada morate preuzeti fontove putem dodatka Supreme Google Webfonts.

Popularne opcije

Naravno, teško je procijeniti koji su stilovi najbolji, posebno za različite teme web stranice. Prilikom izrade web stranice imajte na umu da vam se ne bi trebala svidjeti, već vaša publika. Stoga je bolje bolje pogledati konkurentne web stranice.

Obično se za komercijalne resurse niko ne trudi oko stilova. Uostalom, ako vidite font u Google Chromeu u internetskoj trgovini, vjerojatno se nećete zadržati na njemu. Ali ako imate blog ispred sebe, najvjerojatnije će vam se nešto svidjeti, ali nešto će, naprotiv, biti dosadno.

Google Fontovi pripremili su mnoge kolekcije koje uključuju i popularne stilove. Na primjer, Jastog se koristi za pojedinačne blokove u tekstu. Teško je čitati ako je cijeli članak napisan tako podebljanim kurzivom. Ali umetci i citati izgledaju dobro.

Loš skript je takođe opcija za bloganje. Kurziv je teško čitati velike nizove teksta, ali oni mogu istaknuti glavnu ideju. Stil oponaša rukopis. Jura normal 400 zanimljiva je varijanta za ćirilicu. Autor tvrdi da se radi o eurostilu iz porodice Sans-Serif. Izgleda jako dobro i ima nekoliko varijacija.

Prvi dio ovog poglavlja posvećen je uvodu u CSS fontove. Na ovoj stranici ćete naučiti kako uključiti fontove u CSS, šta su web fontovi i kako s njima raditi, koji formati fontova postoje, kako koristiti Google fontove. Prvo, pogledajmo jednostavan primjer povezivanja CSS fonta:

P (porodica fontova: Verdana;)

Ovaj mali dio koda znači da sve oznake

Font je Verdana. Svojstvo font-family navodi koji font ili porodica fontova će se koristiti. Tačan prikaz ovog stila u pregledaču korisnika zavisi od toga da li je navedeni font instaliran na njegovom računaru. U našem slučaju, ako font Verdana nedostaje na korisnikovom računaru, preglednik će prikazati zadani font.

Dizajneri su svojevremeno morali dodatno navesti nekoliko rezervnih fontova u slučaju da glavni nedostaje na korisnikovom računaru. Pretpostavimo da želite stilizirati tekst s fontom Verdana i instalirati Trebuchet MS, Ženevske fontove i bilo koji font bez serifa kao zamjenu. Zapisano je na ovaj način:

P (porodica fontova: Verdana, "Trebuchet MS", Ženeva, sans-serif;)

Prilikom obrade ovog koda, pretraživač će prvo provjeriti prisutnost fonta Verdana na računaru korisnika. Ako je font prisutan, sadržaj oznaka

Prikazano ovim fontom. Ako font nedostaje, pretraživač će provjeriti slijedeći font na listi - Trebuchet MS. Ako ovaj font nedostaje, provjerit će se sljedeći font - Ženeva. Ako korisnik nema Ženevu na svom računaru, preglednik će odabrati drugi dostupni font bez serifa i prikazati tekst s njim.

Bilješka: u kodu smo napisali naziv slova Trebuchet MS pod navodnicima. Naziv fonta potrebno je staviti u dvostruke ili jednostruke navodnike kada sadrži razmake.

O tome šta je font serif i sans-serif možete pročitati na stranici Wikipedia.

Web fontovi

Gore navedeni način korištenja fontova ima veliki nedostatak - ograničeni ste u broju fontova. Morat ćete biti zadovoljni samo onim opcijama koje su najvjerojatnije instalirane na većini računara.

Kako možete povećati izbor fontova kako biste dizajn stranice učinili individualnim, dodali originalnost? Web fontovi priskaču u pomoć. Pročitajte poglavlje o tome kako biste saznali kako raditi s njima.

Dakle, da bismo prikazali željeni font u pregledaču korisnika, potrebno nam je da se ovaj font preuzme na njegovo računalo. Ovo je prilično lako postići. Ova metoda povezivanja fontova sa CSS -om otvara zaista velike mogućnosti dizajnerima. Ali vrijedi spomenuti muhu u masti: prvo, svaki preglednik ne podržava određeni format fonta (što će dovesti do toga da se font ne prikazuje), i drugo, ako datoteka s fontom ima veliku težinu, može se usporiti učitavanje stranice nadole.

Podrška za format

Kako se nositi s problemom neusklađenosti formata datoteke? Pogledajmo tablicu koja prikazuje najpopularnije formate fontova i vidimo koji ih preglednici podržavaju:

Bilješka: Najnovije informacije o podršci za format fontova uvijek možete pronaći na caniuse.com. U traku za pretraživanje morate unijeti naziv formata (na primjer, ttf).

Ako ciljate na moderne preglednike, trebali biste samo koristiti format fonta TTF - najčešći i najkorišteniji. U slučaju da trebate imati više formata jednog fonta, možete koristiti posebne mrežne pretvarače iz jednog formata u drugi, a zatim povezati sve datoteke jednu po jednu. Tako će preglednik moći odabrati format fonta s kojim radi.

Uključujući web font koristeći @ font-face

Pretpostavimo da imate svoj jedinstveni font pod nazivom MyUniqueFont u TTF formatu i želite da glavni tekst vaše web stranice bude prikazan ovim fontom. Prvo što trebate učiniti je kopirati datoteku fonta u mapu u kojoj se nalaze sve ostale datoteke web lokacije. Da biste izbjegli nerede, možete stvoriti zasebnu mapu posebno za fontove, nazvanu na primjer fontovi.

@ font-face (font-family: MyUniqueFont; src: url ("fontovi / MyUniqueFont.ttf");)

Svojstvo font-family igra drugačiju ulogu u ovom slučaju: s njim dodjeljujemo ime fontu, tako da ga tada možemo koristiti pri pisanju stila:

P (font-family: MyUniqueFont;)

Druga linija određuje putanju do datoteke fontova. U našem primjeru, datoteka MyUniqueFont.ttf nalazi se u mapi fontova. Vaš URL može biti drugačiji.

Google fontovi

Google olakšava povezivanje bilo kojeg fonta iz zbirke Google fontova. Sve što trebate učiniti da biste počeli koristiti font koji vam se sviđa je da navedete nekoliko postavki na stranici za font u Google -u, zatim kopirate posebnu vezu na ovaj font i dodate je u svoj web dokument.

Bilješka: cijela zbirka fontova iz Googlea dostupna je na web mjestu Google fontovi... Na stranici možete koristiti različite filtere za traženje fontova prema kategoriji, debljini, abecedi.

U nastavku ćemo opisati svaki korak povezivanja Googleovog fonta. Da biste razumjeli o čemu se radi, odaberite bilo koji font sa stranice Google Fontovi i otvorite ga klikom na dugme Brza upotreba.

Korak 1: odaberite lice

Prije svega, na stranici odabranog fonta prikazat će se opcije za njegov stil, kao i ikona brzinomjera, što ne znači ništa više od brzine učitavanja fonta. Što više stilova odaberete za font, duže će vam trebati da ga preuzmete. Stoga se preporučuje da odaberete samo one opcije fontova koje planirate koristiti.

Korak 2: odaberite abecedu

Dalje na stranici moguće je odabrati skup znakova: latinični, ćirilični itd. Ovisno o fontu, možda neće biti dostupne sve varijante abecede. Slično prethodnoj točki, bolje je staviti kvačicu samo ispred abecede koja vam je potrebna.

Korak 3: dodajte kôd na web mjesto

Prva metoda uključuje dodavanje veze na Google server u HTML kodu, odakle se font preuzima. Morate kopirati gotov dio koda i postaviti ga između oznaka u vašem HTML dokumentu. Primjer:

...

Drugi način je povezivanje fonta pomoću @import direktive. Gotov kôd nalazi se u drugoj kartici točke 3 na stranici odabranog Google fonta. Treba ga dodati na sam početak vaše tablice stilova (u protivnom datoteka neće biti uvezena). Kod izgleda ovako:

@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Posebnost prve metode je ta što morate dodati vezu do fonta u naslovu svake stranice na kojoj ga namjeravate koristiti. To je lako učiniti na web stranicama s malim brojem stranica, ali problematično za velike resurse. Druga metoda je zgodna po tome što se kôd može postaviti na sam početak vanjskog stilskog lista, a tada će sve stranice na koje je ova tablica povezana dobiti odgovarajući font, koji će se učitati pomoću @import direktive.

Korak 4: stvorite stil

Nakon što dovršite prethodne korake, možete početi primjenjivati ​​font. Već ste vidjeli kako se takvo CSS pravilo piše:

P (font-family: "Roboto", sans-serif;)

Ako ste u prvom koraku odabrali nekoliko opcija za stil (na primjer, dodali varijantu podebljanog tipa Bold 700), tada će se u trećem koraku kôd malo izmijeniti:

@import url (http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Da biste font učinili podebljanim, napišite CSS stil ovako:

P (porodica fontova: "Roboto", sans-serif; font-težina: 700;)

Bilješka: Google fontovi koriste samo konvencionalne jedinice od 100 do 900 za označavanje težine fonta. Na primjer, normalni stil (prema zadanim postavkama) ekvivalentan je 400 (normalan), a standardni podebljani ekvivalent 700 (podebljani).

Glavne prednosti usluge Google Fontovi su:

• jednostavnost upotrebe (čak i početnik može shvatiti uslugu, a sav potreban kôd generira se automatski - samo je trebate kopirati);
• dostupnost fontova (ne morate ih plaćati);
• svi korišteni formati fontova su dostupni (to znači da će svaki preglednik moći preuzeti upravo format s kojim funkcionira).

Među nedostacima usluge nije velika raznolikost fontova, posebno ćiriličnih. Usput, na internetu postoje i druge slične usluge, na primjer TypeKit (plaćeno).

Ishodi

Danas imamo nekoliko mogućnosti za povezivanje originalnih i nestandardnih fontova na web stranice. Svaka od ovih metoda ima svoje prednosti i nedostatke. Koju od opcija je bolje koristiti, morate sami odrediti. Često ovisi o situaciji, a različiti pristupi mogu biti korisni u različitim slučajevima. U ovom trenutku samo trebate znati koristiti fontove u CSS -u.

Google fontovi jedan su od najboljih resursa za besplatne web fontove, a Google vam nudi nekoliko načina da ih uvezete na svoju web stranicu. Nažalost, nijedan od njih ne uključuje popularni WordPress engine. To znači da morate ili koristiti dodatke, kojih ima mnogo, ili uprljati ruke petljanjem po kodu.

Dobra vijest je da možete instalirati bilo koji font iz Googleove biblioteke na gotovo bilo koju WordPress temu bez previše gnjavaže. Kako tačno - naučit ćemo vas danas.

Postoje dvije mogućnosti - spojite dodatak ili se malo pozabavite datotekom functions.php.

Ali prvo bih želio navesti prednosti i nedostatke Google fontova, tako da konačno možete odlučiti hoćete li ih koristiti u svojim projektima ili ne.

Dobri i loši Google web fontovi

Što se tiče web fontova, Google je jedna od najboljih opcija. u pogledu performansi ... Sve zbog lagane konstrukcije i sistema keširanja. Posjetioci ne moraju čekati da se učitaju Google fontovi ako su nedavno posjetili web lokaciju koja ih koristi. Popularni fontovi poput Open Sans -a mogu poboljšati performanse vaše web lokacije smanjenjem vremena učitavanja.

Još jedna karakteristika je to Google vam omogućava preuzimanje ovih fontova tako da ih možete koristiti u svojim izgledima.

I na kraju platforma je potpuno besplatna ... Da biste počeli koristiti fontove, samo se morate prijaviti ili stvoriti poštanski sandučić na Gmailu (a ko danas nema poštu na Gmailu?).

Od nedostataka možete to naznačiti izbor google fontova je mali , mnogi od njih su međusobno slični. Potrebno je mnogo pretraživanja da biste pronašli pristojan, originalan font. Vrlo je malo ćiriličnih fontova.

Osim toga, postoje i uobičajeni sigurnosnih briga - morate unijeti neke lične podatke prilikom instaliranja Googleovih fontova na svoju web lokaciju.

Kako instalirati Google fontove pomoću WordPress dodataka

Ako tražite dodatke, prvo što vidite u rezultatima pretraživanja je WP Google Fontovi i Jednostavni Google web fontovi ... Ovo su zaista dva najbolja dodatka.

Dodaci nisu idealno rješenje za instaliranje Google fontova na WordPress web mjestu - ne samo sa stajališta performansi, već i zato što vam dodaci ne dopuštaju odabir određenih dijelova teksta. Međutim, ako ste vi ili vaš klijent uvjereni da je bolje koristiti dodatke, pogledajte ove dvije opcije.

Ovaj dodatak vam omogućuje ciljanje određenih elemenata poput naslova H1, odlomaka i navoda. Dobivate i prilagođenu CSS opciju za daljnje oblikovanje određenih fontova. Dodavanje i prilagođavanje Google fontova na vašoj WordPress web lokaciji prilično je jednostavno s ovim dodatkom.

Jednostavni Google web fontovi opravdavaju svoje ime i čine instalaciju Google fontova super lakom, čak i za početnike. Možete koristiti funkciju Live Preview za pregled, testiranje i optimiziranje fontova bez napuštanja web stranice, te kreiranje vlastitih fontova bez pisanja reda koda.

Pravilan način instaliranja Google fontova u WordPress predložak

Na kraju dolazimo do mogućnosti da otvorimo datoteku functions.php i napravimo malo koda. Prije nego što to učinite, morate odabrati font iz Googleove biblioteke. Za primjer, pokušajmo uzeti vrlo popularne Open sans.

Zatim morate odabrati stil fonta - normalan, podebljan ili kurziv. Možete i sami :)

Nakon što odaberete stilove, Google će vam dati isječak koda. Naš izgleda ovako:

Osim toga, dobili smo CSS stil:

font-family: "Open Sans", sans-serif;

Sada je vrijeme da otvorite datoteku functions.php (putanja datoteke: wp-content / themes / yourtheme). Na kraju datoteke dodajte novu funkciju:

funkcija load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");

Ključ ove funkcije je naredba "wp_enqueue_style", koja tjera WordPress da pozove listove stilova fonta na zaglavlju svake stranice. Ako pažljivo pogledate, vidjet ćete da smo uklonili vezu href = i rel = 'stylesheet' type'text / css 'iz koda koji nam je Google dao, a isto ćete morati učiniti ako želite dodati bilo koji drugi Google font za vašu WordPress web lokaciju.

Sve što trebate učiniti je otvoriti glavnu CSS datoteku i zalijepiti stil sa Open Sans -a. Ovdje rade uobičajena pravila, pa dodajte sljedeći kôd u svoju tablicu stilova, spremite i ažurirajte:

telo
{
font: normalan 1em "Open Sans", bez serifa;
boja: # 313131;
}

Ovaj stil će funkcionirati na cijeloj web lokaciji. Za pojedinačne fragmente teksta možete postaviti drugačiji stil:

Podebljani tekst
{
font: bold 1em "Open Sans", sans-serif;
}

Kao što vidite, zapravo je vrlo jednostavno. Probajte i provjerite rezultat :)

Vlad Merzhevich

Font je sastavni dio web dizajna, daje web stranici izražajnost i prepoznatljivost, izražava karakterističan stil web stranice i direktno je povezan s percepcijom tekstova. Dobro odabran font možda se neće primijetiti, ali bez njega neće biti zanosa koji upotpunjuje dizajn web stranice.

Ako na računaru već imate instaliran određeni font, tada je u stilovima dovoljno dodati redak.

h1 (porodica fontova: SuperPuperFont;)

Vrijednost svojstva font-family je naziv pisma, primijenit će se na sve naslove

... No, što će posjetitelji web stranice vidjeti ako nemaju instaliran naš spektakularan i rijedak font? Ova situacija je najvjerojatnija, pa ako preglednik ne prepozna deklarirani font, upotrijebit će zadani font, na primjer u sustavu Windows to je Times New Roman. Sav naš pažljivo osmišljen dizajn će se raspasti preko noći, pa moramo tražiti najsvestranije rješenje. Prvo što mi odmah padne na pamet je organizirati preuzimanje datoteke fonta na računalo korisnika i prikazati tekst odabranim fontom. U usporedbi s drugim metodama, poput prikaza teksta kroz sliku, ova metoda je najjednostavnija i najsvestranija.

Koje su prednosti preuzimanja datoteke fonta i njene primjene putem CSS -a.

• Tekst se lako dodaje i uređuje.
• U pregledniku možete koristiti pretraživanje i pronaći željene fraze.
• U postavkama preglednika možete smanjiti ili povećati veličinu fonta kako biste postigli ugodno gledanje.
• Tražilice dobro indeksiraju sadržaj dokumenta.
• Tekst se može odabrati i kopirati u međuspremnik, kao i prevesti na drugi jezik.
• Parametri teksta kao što su prored, boja, veličina i slično lako se mijenjaju pomoću CSS svojstava.
• Opet, putem CSS -a tekstu možete jednostavno dodati različite efekte, na primjer, sjenu.

Kao što vidite, ima mnogo prednosti. Postoje neke manje nedostatke i vrijedne su spomena radi ravnoteže.

• Ne podržavaju sve verzije preglednika font koji se može preuzeti i isti format za sve.
• Datoteka koja sadrži font može biti velika, što usporava učitavanje web stranice.

Tablica 1 navodi verzije preglednika i formate fontova koje podržavaju.

Tab. 1. Podržani formati

Format	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Najviše podržani format je TTF. S izuzetkom IE -a do verzije 9.0 i iOS -a, svi preglednici to savršeno razumiju. Dakle, ako imate font u ovom formatu i ciljate na moderne preglednike, ne morate učiniti nikakve dodatne korake. Dovoljno je napisati sljedeći kod u stilovima (primjer 1).

Primjer 1. Povezivanje TTF -a

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Prvo učitajte samu datoteku fonta koristeći pravilo @ font-face. Unutar njega upisujemo ime fontova koristeći parametar font-family i put do datoteke pomoću src. Zatim koristimo font kao i obično. Dakle, ako trebamo postaviti font za zaglavlje, tada za h1 selektor, kao što je prikazano u primjeru, postavljamo svojstvo font-family s imenom učitanog fonta. Za starije verzije IE -a navodimo rezervne dijelove odvojene zarezima. U ovom slučaju, naslovni font bit će "Comic Sans MS" jer IE8 i niže ne podržavaju TTF format.

Rezultat ovog primjera prikazan je na Sl. jedan.

Pirinač. 1. Zaglavlje sa preuzetim fontom

Šta ako vam treba ukrašen font u IE8? Srećom, @ font-face vam omogućava da uključite više datoteka fontova različitih formata istovremeno. Preglednik samo mora odabrati odgovarajući. Stoga se univerzalno rješenje koje radi u svim preglednicima svodi na pretvaranje postojećeg TTF formata u EOT, a zatim povezivanje obje datoteke.

Za konverziju postoji nekoliko mrežnih usluga koje vam omogućuju preuzimanje TTF datoteke i dobivanje EOT datoteke na izlazu. Nažalost, većina ovih usluga ima isti problem - primamo datoteku, ali ruski jezik u njoj nije podržan. Kao rezultat toga, željeni rezultat nije postignut, konverzija nije točna. Među web lokacijama koje sam provjerio bilo je i jedno koje je ispravno prikazalo tekst u IE -u.

Idite na ovu web lokaciju, učitajte TTF datoteku i pritisnite gumb "Pretvori TTF u EOT", nakon čega dobivenu datoteku spremamo u mapu fontova. Ostao je mali trik u stilovima da natjerate različite preglednike da učitaju font u ispravnom formatu. Da biste to učinili, dodajte dva src parametra. Prva upućuje na EOT datoteku i odnosi se na starije verzije IE -a. Drugi src parametar mora sadržavati dvije adrese odvojene zarezima, od kojih jedna upućuje na TTF datoteku. Činjenica je da IE verzija 8.0 i starije ne razumije zarez u src parametru i prema tome će potpuno zanemariti parametar. Može postojati nekoliko pravopisnih opcija, na primjer, ponoviti url, navesti naziv fonta unutar lokalnog parametra ili napisati potpuno nepostojeći font. Ako preglednik ne može učitati takav font, otići će na drugi na listi i mi smo ga napisali ispravno. Prihvatljivi načini pisanja.

src: url (fontovi / pompadur.ttf), url (fontovi / pompadur.ttf);
src: lokalni (pompadur), url (fontovi / pompadur.ttf);
src: lokalni ("bla bla"), url (fontovi / pompadur.ttf);

Radna opcija za povezivanje fonta za sve verzije preglednika prikazana je u primjeru 2.

Primjer 2. Povezivanje EOT -a

HTML5 CSS3 IE Cr Op Sa Fx

Moderan element političkog procesa

Zapravo, Montesquieuova politička doktrina vodi kontinentalno-evropski tip političke kulture, što se odrazilo u Michelsovim djelima.

Što se tiče iOS -a, čini mi se da nema smisla praviti i preuzimati zasebni font u SVG formatu. Publika web stranica koje ga pregledavaju putem iOS -a još je mala, osim toga, pokušavaju olakšati verziju web stranice za mobilne uređaje, a nije poželjno preuzeti dodatnih nekoliko desetaka kilobajta.

Google web fontovi

Pogodna usluga koja preuzima rutinu podržavanja različitih formata fontova i verzija preglednika nalazi se na www.google.com/webfonts... Iako u zbirci postoji relativno malo različitih fontova (ima ih nekoliko desetaka), svi su vrlo kvalitetni i besplatni za upotrebu na web stranicama.

Prije odabira fonta, prebacite vrijednost Script na ćirilicu, tada ćete vidjeti popis fontova koji podržavaju ruski (slika 2).

Pirinač. 2. Odabir fontova u Google web fontovima

Font koji volite prvo treba dodati u zbirku klikom na dugme "Dodaj u kolekciju", a zatim na dugme "Koristi" u donjem desnom uglu ekrana. Na sljedećoj stranici (slika 3) konačno možete odabrati potrebne fontove. Treba shvatiti da font može sadržavati nekoliko stilova, a svaki od njih povećava volumen preuzetih datoteka.

Pirinač. 3. Fontovi učitani na stranici

Odabrane fontove možete povezati na jedan od tri načina; dodani kôd se može kopirati niz stranicu.

1. Kroz element ... Linija će izgledati otprilike ovako.

2. Kroz pravilo @import. Ovu liniju ubacujemo u našu CSS datoteku na samom vrhu.

@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Putem JavaScripta.

U osnovi, svi putevi su jednaki, pa birajte prema svojim željama.

Prednosti korištenja ove usluge su sljedeće.

• Fontovi su besplatni za upotrebu, ne morate ih plaćati.
• Ponuđeni fontovi su "izoštreni" za gledanje na ekranu, datoteke su optimizirane i zauzimaju relativno mali volumen.
• Preglednik se automatski otkriva i prikazuje se font u potrebnom formatu.

Jedna od glavnih prednosti usluge je ta što se fontovi pohranjuju u formatima TTF, EOT, WOFF, SVG i učitavaju nakon provjere preglednika. Dakle, EOT format bit će dostupan samo za starije verzije IE -a.

Na vama je da li ćete koristiti Google web fontove ili ne. Ako tamo niste pronašli odgovarajući font, uvijek možete povezati popularni i rasprostranjeni TTF. Štoviše, podržavaju ga najnovije verzije svih popularnih preglednika.

Font igra važnu ulogu u dizajnu web stranice, može naglasiti opći stil, pomoći korisniku u navigaciji po tekstualnom sadržaju. Traženje besplatnih fontova, a zatim povezivanje hrpe datoteka za različite preglednike nije zadovoljavajući zadatak, ali postoji izlaz - fontovi iz Google Fontova.

Pronalaženje pravog fonta iz Google Fontova

Idemo na samu Googleovu uslugu fontova i pogledajmo njene mogućnosti.

Na lijevoj (bočnoj) ploči možete konfigurirati parametre filtriranja fontova i, što je najvažnije, odabrati pripada li ćiriličnom ili latiničnom pismu.
U gornjem dijelu možete promijeniti prikaz demo teksta, u obliku: riječi, rečenice, odlomka, postera. Promijenite veličinu fonta i unesite vlastiti tekst umjesto demo verzije.

Povezivanje fonta iz Google Fontova

Nakon što ste odabrali željeni font, kliknite na dugme "brza upotreba" (pogledajte sliku ispod)

Na stranici za povezivanje fontova morate odabrati:

1. Stilovi fontova, podebljani, kurziv itd. Ne pretjerujte previše, odaberite samo ono najpotrebnije, jer sve to utječe na brzinu učitavanja fonta i, shodno tome, na brzinu učitavanja teksta na vašu web lokaciju. Pratite indikatore senzora s desne strane (tačka 5 na slici)
2. Odaberite koje znakove trebate u ovom fontu (uglavnom latinicu i ćirilicu).
3. Kopirajte kod oznake veze u HEAD blok
4. Koristimo deklaraciju fonta u stilovima prikazanim u paragrafu 4 (vidi sliku)