Da biste saznali sve sami - nije lako, ali vrlo zanimljivo. Ako imate barem površnost ideju kako web mjesto djeluje, onda je bolje da sami provode vaš projekt. Istovremeno, nećete samo sačuvati gomilu novca, ali takođe naučite puno "čipova", tajni itd. Koristeći Google fontove obično ne privlače pažnju, mada zahvaljujući im blog može postati zanimljiviji.
Servis
Dugo se na Internetu pojavilo glavna usluga web fontova. Razvio ga je Google. Korisnici su ga mogli besplatno koristiti. Unatoč činjenici da se postavljanje ove vrste ne smatraju supermer, još uvijek postoje takvi ljudi koji su pogrešili i nisu mogli nositi se sa uslugom.
Da biste to učinili, posebno je dizajniran jednostavan dizajn. Sada radi sa fontovima Google fontova postao je lakši, a broj posjetilaca se povećao. Biblioteka se proširila. Prošle godine je održana nova usluga koja je okupila puno pozitivne povratne informacije. Sada su ljudi postali lakše povezati fontove na svoje web stranice i vidjeti ih.
Izgled
Dakle, za one koji nikada nisu bili na sajtu sa starim dizajnom, morate napraviti opću sliku promjena. U prošlosti se usluga izgledala prilično masovno. Svugdje su bili debeli okviri, privlačni tasteri plave boje, grafika nije bila najveća dozvola. Sve je to značajno utjecalo na posjetitelja.
Sada su programeri fokusirani na dizajn materijala. Sve stečene sofisticirane funkcije. Izgled Postao je "lakše". Fina animacija, interaktivnost je postala primjetna. Ništa drugo ne odvlači pažnju iz odabira željenih fonta Google Fontova.
Bilo je zgodne adaptacije resursa ispod mobilni uređaji. Naravno, takva promjena nije mnogo uočljiva protiv pozadine inovacija, ali uzimajući u obzir greške prethodna verzija To će biti za avidne korisnike "manne nebeske".
Prilika
Često slične usluge koriste dizajneri. Uprkos njihovom iskustvu i profesionalizmu, rade i sa vizualizacijom. Redizajn je predstavio sve slične karakteristike koje bi vam omogućilo da se unaprijed kombinirate što će biti potrebno za implementaciju 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 je. Kompanija je dodala više alata i paletu sa univerzalnim tonovima, što bi omogućilo eksperimentiranje i saznati kako će jedan ili drugi font izgledati u određenoj boji.
Odabrano
Google fontovi Fontovi usluga pruža korisnicima korištenju odabranih opcija. Na posebnom jeziku prikuplja se skup stilova koji programer preporučuje upotrebu. Te se zbirke dodjeljuju među ostalim. Razvijaju ih stručnjaci iz Google i treće strane agencije. Većina njih ima određeni stil i posebnu filozofiju.
Pogled
Jedna od važnih promjena utjecala je direktno izbora fontova. Razumije se da je ranije korisnik vidio neki crtež sa dodatnim gumbima i velikim plavim, koji je dodao font u kolekciju. Općenito, ova opcija je izgledala dobro, ali ne uvijek je bilo dovoljno kutije dobra dozvola Slike sa stilom, i stoga definitivno određuju, kako će se font izgledati, bilo je teško.
Bilo je pitanja i ovih dodatnih tipki koje su malo znale na prvi pogled. Bilo je potrebno ili ih donijeti na njih ili koristiti. Sada je postalo manje ili više jasno. Postoje dodatne karakteristike:
- Odaberite određeni prijedlog, odlomak ili vlastiti tekstualni element.
- Eksperimenti zasićenosti fontova.
- Brzo postavljanje veličina pomoću klizača.
Usput, promjena veličine Google fontova postala je prilagodljiva, jer se samo jedan primjer promijenio, a ne sve na stranici. U stara verzija Korisnici se mogu prenijeti s jedne ivice stranice na drugu, a na novom jednostavno ostanite na primjeru koji je reguliran.
Veza
Ako ste spremni koristiti ovu uslugu, možete pokušati povezati fontove na svoj resurs. Proces pribavljanja veza je univerzalan. Problemi mogu nastati ovisno o vašem CMS sistemu. Svaki koristi vlastite načine. Stoga će za različite projekte morati odabrati pojedinačne opcije.
Pogledat ćemo kako dobiti vezu za povezivanje Google fontova. Morate otići na službenu web stranicu Google fontova. Tamo gledate katalog stilova i odaberete onaj koji najbolji odijela. Da biste to učinili, pored njega kliknite "Plusik". Nakon što će font biti dodan u poseban blok na dnu stranice.
Kliknite na ovu jedinicu, a zatim ga konfigurirajte. Ovdje možete odabrati natpis i potrebnu abecedu. Ako su vam potrebni Google fontovi ćirilica, a zatim označite ćirilicu. Nakon formiranja veze. Može se naći u istom prozoru na kartici Ugradi. Dovoljno je samo kopirati ili koristiti puni HTML kod.
Obično u postavkama web lokacije nalazi se font i boje. Postoje standardne opcije i možete dodati produženo. Imaju zasebnu opciju za Google fontove. Ako tada trebate preuzeti fontove kroz vrhovne WebFonts dodatak.
Popularne opcije
Teško je, naravno, suditi koji su stilovi bolji, posebno za različite predmete mjesta. Prilikom kreiranja vaše web lokacije sjetite se da vam ne bi trebao voljeti, već i vaša publika. Stoga je bolje pogledati na konkurente.
Obično za komercijalne resurse niko ne smeta o stilovima. Uostalom, ako vidite font u Google chrome. U internetskoj trgovini vjerovatno nećete obratiti pažnju na to. Ali ako imate blog, najvjerovatnije, nešto što možete, i nešto, naprotiv, nervirat će se.
Google Fontovi pripremili su mnoge kolekcije u kojima postoje popularni stilovi. Na primjer, jastog volje da se koristi za pojedinačne blokove u tekstu. Teško je pročitati ako je cijeli članak napisan u tako hrabarju kurzivu. Ali izgleda dobri umetci i citati.
Loša skripta je takođe opcija za blogove. Kurzivna vrsta teška za čitanje velikih nizova teksta, ali možete dodijeliti glavnu ideju. Stil imitira rukopis rukopisa. Jura Normal 400 je zanimljiva opcija za ćirilicu. Autor tvrdi da je ovo eurostil iz porodice Sens Serip. Izgleda jako dobro i ima nekoliko varijacija.
Webfonts je tehnologija korištenja trećih fontova na svojoj web stranici. Jedan primer:Ako krenete od izvora, oznaku fonta uvedena je 1995. godine, a već je 1996. godine napisana definicija softvera. Počevši od verzije CSS 2.0, uvedena je sinteza fonta i sinteza preglednika, ali ipak, a zatim i dalje popularna, a sada stara i nebitna, tj nije imala podršku za utovar fontova, što je spriječilo brzi razvoj fontova na svojoj web stranici.
U moderni internet Web fontovi su dugo uspostavljena stvar. Na različitim lokacijama možemo koristiti sve vrste fontova, koje zauzvrat nisu uključene u ponudu određenog operativnog sistema, ali postoji nepoželjna nuspojava, o čemu ćemo danas razgovarati i razgovarati.
Formati datoteke
Da biste povezali fontove, koristi se umetanje softvera u CSS, takozvani @ -elilo. Dakle, B. jednostavan oblik @ Font-lice je takva deklaracija. Izgleda ovako: / * Proglasite font * / @ font-licu (font-lice: "Naziv fonta"; src: URL ("staza / gore / it");) / * Primjeni * / P (naziv fonta: "Naziv fonta" , Arial;)
TTF ili OTF - uobičajena datoteka fonta, ali učitana sa servera tokom vremena pregledavanja web lokacije;
WOFF je nezaštićena arhiva izvora OTF ili TTF-a, možda najvažniji format koji podržava najpopularnije pretraživače, a datoteke u Woftu obično 2-2,5 puta lakše od originala;
EOT - uveo arhivu TT Opentype, koji ima mehanizme zaštite, potreban za podršku starim preglednicima Internet Explorer. (počevši od IE8, osim trueType krivulja, podržanih i postScript);
SVG - podržati safari pretraživač.
Pripremljeno za implementaciju (@ font-lice) na fontove sajta danas mora biti odmah u nekoliko formata. Shvatili ste da postoje neke odstupanja, kao i nema ni jednu vrstu operativni sistemi. Formati fonta su prilično puno, ali beton će raditi samo u određenom pretraživaču. Što se tiče ovih većine formata, zašto ih je potrebno toliko odrediti kada su povezani, onda su potrebni za podršku u pregledniku web lokacije.
@ Font-face (porodica fontova: "Ashift_name"; src: URL ("file_name_shift.eot"); src: url ("file_file_shift.eot? # #Iefix") format ("ugrađena-opsentype"), URL ("datoteka name_shift .woff ") format (" WOFF "), URL (" file_shift.ttf ") format (" TrueType "), URL (" file_fail_name.svg # dsnoteregularni ") format (" SVG "); TEŽINA: Normalna; font -style: normalno;)
Ako želite koristiti šifrirani kod, umjesto datoteke, u ovom slučaju, baza64 dolazi na pomoć, koja djeluje na isti princip i sa slikama, međutim, za stare IE Base64 se ne obrađuje.
@ Font-Face (Fontografija: "Ashift_name"; src: URL ("file_name_shift.eot");) @ font-lice (porodica fontova: "Ashift_name"; SRC: URL (podaci: font / woff; charset \u003d Utf-8; base64, podaci) format ("woff"), URL (podaci: font / truetype; charset \u003d utf-8; base64, podaci) format ("trueType"), URL ("file_name_svg #file_shot_name") format ( "SVG"); Težina fonta: Normal; Fontov stil: Normalno;)
Ugrađeni Opentype?
Kao što možete primijetiti, dodaci za IE imaju liniju sa takvim parametrom:SRC: URL ("file_file_seot? #Iefix") Format ("ugrađeni - Opentype")
U klasičnoj verziji morali smo s vama odrediti:
SRC: URL ("file_shift.eot") Format ("ugrađeni - Opentype")
Ali kada dodajete simbol "?" Nakon format fonta, prisilno određujemo pretraživač da ne čitamo sledeća indikacija - format ("ugrađeni - OpenType"). Internet Explorer podržava ugradnju fontova putem takozvanog društva ugrađenog Opentype standarda, počevši od IE 4.0 verzije. Koristi metodu upravljanja digitalnim pravima kako bi se spriječilo fontove koji se odnose na licencu.
Što ako font nije podržan u pretraživaču?
Davno su izmišljene zaobilaznice za obilaznice, takozvane "štake" za prikaz fonta. Postoje slučajevi kada je font dizajniran samo u SVG formatu ili samo u TTF formatu.1. U stara vremena, programeri su povezali sliku, što je zauzvrat bio postignut tekst vizuelni urednik. Međutim, sada se smatra lošim tonom, za podršku se predviđa (morate ponovo otvoriti uređivač da biste promijenili tekst slike), korisnik ne može kopirati tekst sa slike.
2. Takođe je uobičajena upotreba flash rješenja.
3. Još jedno rješenje je korištenje JavaScriptaDa biste zamijenili tekst s VML (za Internet Explorer) ili SVG (za sve ostale preglednike).
Koji se problemi i dalje mogu pojaviti?
Preglednik će pokušati sinhronizirati utovar fonta, pokušat će sakriti tekst, odnosno da bi bio nevidljiv dok se font ne učita. Ovaj efekat se naziva foit, efekat "bijelog bljeskalice".Efekt bljeskalice
Učinak foita u pretraživačima kao što su Safari, Chrome, Opera, Firefox teži da sakrim tekst u roku od najviše 30 sekundi prije nego što odbije dobijati font, nakon čega je postavljen zadani font.Primjer načina na koji se font učita:
Ipak, 2,7 sekundi je dugo!
Šta se može učiniti?
U početku je pristup bio omogućiti konverziju datoteke fontova na podatke za URIS kako bi ti fontovi mogli biti uključeni izravno u definicije porodice fontova u CSS datoteci. Preuzimanjem ovog CSS datoteke asinhronog načina možete garantirati da će pretraživač odmah dati tekst na stranici pomoću prilagođenih fontova, a novi fontovi bi se koristili čim bi CSS učitao.Međutim, u bilo kojem eksperimentu postoji nuspojava.
U početku, Bram Stein koristio je prilagođeni font, ali nakon što je njegov font učitao, dogodio se "treperenje", u primjeru 0,7 sekundi:
Ukratko, treperenje se događa kada pretraživač pokušava prikazati font iz fonta-fact-a i primijeniti je na HTML. Font definiran u @ font-licu deklaracije, koji se još nije učitao.
Bram Stein je pokazao kako pravilno povezati fontove, razvio je scenarij, alternativu Googleu za asinhrono učitavanje fonta, ovo je fontfaceobserver skripta.
Pokušavati
Analiza
Standardna veza sa GoogleaIskreno, koristeći više od jednog fonta na web mjestu, možete posebno usporiti brzinu učitavanja web mjesta, na taj način povećavajući ukupno vrijeme opterećenja. Google Fonts API omogućava vam brzo dodavanje fonta na web lokaciju pomoću generatora fonta, na taj način brzo dizajnirajte svoju web stranicu. Međutim, morate se sjetiti učinka foita. Ukupno vrijeme opterećenja - 322 ms.
Web font utovarivač iz Googlea
Web Font Loader - Javascript biblioteka za napredni rad sa API-om, biblioteka koja nam daje više kontrole nad utovarm fonta od standardnog Google Fontova API-ja. Skripta nam omogućava da koristimo mnoge fontove, učitavajući ih uzastopno ili asinkrono. Za razliku od standardne veze, tekst sa standardnim font prikazuje se na slabim vezama, dok se font ne učita.
Ukupno vrijeme opterećenja: 1132 ms
Fontfaceobserver
FontfaceobServer je javascript biblioteka (5kb), takozvani bootter kompatibilan sa bilo kojom uslugom fontova. Skripta nam omogućava da nas obavijestimo da li je font učitan ili ne, omogućava vam da pratite događaj nakon preuzimanja i do tereta za opterećenje fonta. Ukupno vrijeme opterećenja: 159 ms
Koristeći skriptu.
Google fontovi jedan je od najboljih resursa sa besplatnim web fontovima, a Google vam daje nekoliko načina da ih uvozite na vašu web stranicu. Nažalost, nijedan od njih ne uključuje popularni WordPress motor. To znači da morate koristiti dodatke, koji su puno, ili se pakiraju ruke, uzgajanje kodom.
Dobra vijest je da možete instalirati bilo koji font iz google biblioteke Gotovo svaka tema Wordpress-a bez puno problema. Kako tačno ćemo vas naučiti danas.
Postoje dvije mogućnosti - povežite dodatak ili malo da probijete s Functions.php datotekom.
Ali prvo bih hteo da nabrojim prednosti i nedostatke Google fontova tako da se konačno odlučite koristiti u našim projektima ili ne.
Dobri i loši Google Web fontovi
Što se tiče web fontova, Google je jedan od bolje opcije u pogledu performansi . Sve zbog laganog dizajna i sistema keširanja. Posetioci ne bi trebali čekati Google fontove, ako su nedavno posjetili mjesto na kojem su korišteni. Popularni fontovi poput otvorenih sans mogu poboljšati rad vaše web lokacije smanjujući vrijeme preuzimanja.
Još jedna značajka je to Google vam omogućava da učitavate ove fontove Dakle, možete ih koristiti u svojim rasporedima.
I na kraju platforma je potpuno besplatna . Da biste započeli koristiti fontove, trebate se prijaviti samo ili započeti poštanski sandučić Na Gmailu (i koji danas nema poštu na Gmail?).
Mana Možete odrediti to izbor Google-fontova je mali Mnogi od njih su slični jedni drugima. Potrebno je provesti puno vremena u potrazi za pronalaženjem pristojnog, originalnog fonta. Fontovi za ćirilicu vrlo malo.
Pored toga, postoje obični sigurnosni problemi - Morate odrediti neke lične podatke prilikom instaliranja fontova s \u200b\u200bGooglea na vašoj web lokaciji.
Kako instalirati Google Fontove pomoću WordPress dodataka
Ako tražite dodatke, prvo što vidite u rezultatima pretraživanja - plagings WP Google Fontovi i jednostavni Google Web fontovi . Ovo su zaista dva najbolja dodatka.
Dodaci nisu idealno rješenje za podešavanje Googlea- WordPress web stranica stranica - ne samo sa stanovišta performansi, već i zato što dodaci ne dozvoljavaju da odaberete određene dijelove teksta. Ipak, ako ste vi ili vaš klijent uvjereni da je bolje koristiti dodatke, a zatim pogledajte ove dvije mogućnosti.
Ovaj dodatak omogućava vam da se fokusirate na određene elemente, poput naslova H1, odlomke i citati. Također primate prilagođenu CSS opciju za daljnji rad s odabranim stilovima. Dodajte i konfigurirajte fontove od Googlea na vašem WordPress mjestu sa ovim dodatkom prilično lako.
Easy Google Web fontovi opravdava svoje ime i čini instalaciju Google fontova super jednostavnim čak i za početnike. Možete koristiti značajku uživo za gledanje, testiranje i optimizaciju fontova bez napuštanja web stranice, kao i stvoriti vlastiti pravila fontova bez pisanja linije koda.
Pravi način za instaliranje Google fontova u predlošku WordPress-a
Na kraju dolazimo do opcije da otvorimo datoteku funkcija.php i radimo sa kodom. Prije nego što to učinite, morate odabrati font iz Google biblioteke. Na primjer, pokušajmo uzeti vrlo popularan Otvorite sans..
Tada trebate odabrati stil fonta - normalan, masni ili kurziv. U mogućnosti ste sami :)
Nakon što odaberete stilove, Google će vam dati šifru isjeckanja. Naš liči na ovako:
Pored toga, dobili smo CSS stil:
porodica fontova: "Otvori sans", sans-serif;
Sada je vrijeme za otvaranje funkcija.php datoteke (put do datoteke: WP-sadržaj / teme / yourthete). Na kraju datoteke dodajte novu funkciju:
funkcija Load_fonnts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleaaaaax.com/css?family\u003dopen+Sans:300Italic 4800.500.300"); Wp_enqueue_style ("et-googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");
Ključ ove funkcije je naredba "wp_enqueue_style" koja uzrokuje WordPress da nazove tablicu stilova fontova u zaglavlju svake stranice. Ako pogledate pažljivo, vidjet ćete, izbrisat ćete Href \u003d i Rel link \u003d 'Stylesheet' Typexext / CSS 'iz koda koji nam je Google dao, a vi ćete morati učiniti isto ako želite dodati bilo koji Drugi Google font za vašu web lokaciju na WordPress-u.
Sve što trebate učiniti je otvoriti glavnu CSS datoteku i umetati stil sa otvorenim sans. Ovdje postoje normalna pravila, pa dodajte sljedeći kôd u stil Sheet, Spremi i ažurira:
telo.
{
Font: Normalno 1em "Otvori sans", Sans-Serif;
Boja: # 313131;
}
Ovaj stil će raditi na cijelom web mjestu. Do pojedinačnih fragmenata teksta možete postaviti drugi stil:
Bold-Text
{
Font: Bold 1EM "Otvoreni sans", Sans-Serif;
}
Kao što vidite, u stvari, sve je vrlo jednostavno. Pokušajte i provjerite rezultat :)
Uprkos novim web tehnologijama i startupima, donedavno nam nedostajalo bogato i prekrasna web tipografija.
Iako imamo prilično širok izbor slušalica, mogli bismo koristiti samo određeni skup pravilnih fontova instaliranih i podržanih od strane većine računara - ti su fontovi bili poznati kao - Sigurni web fontovi (Web sigurni fontovi).
Web tipografija protiv štampane tiskarske kuće
Prilikom stvaranja sadržaja o tradicionalnim medijima (novine, časopisi, knjige) u korištenju tipografije, samo vas kreativni potencijal ograničava.
Ali sada je smanjenje odvajanja između tiskanih i virtualnih prevoznika. Sada @ font-lica podržava mnoge moderni preglednici (uključujući Internet Explorer Od verzije IE4.0.).
Uvod u API Google Font
Imenik Google Font i Google Font API su besplatne web usluge iz Googlekoji pružaju vlasnike web lokacija sa mogućnošću korištenja različitih fontova jednostavan, praktičan i efikasan način.
Google Font API - novi predstavnik niše, koji uključuje TypeKit., Typotheque. itd.
Pa idemo u neistraženi potencijal Google Font API.
Šta je Google Font API?
Puno ste putovali na Internetu, ali jeste li vidjeli nestandardne fontove na mnogim web lokacijama ili blogovima?
Odredimo nestandardne fontove koji nisu među sefom ( Arial, Helvetica., Verdana., Gruzija. i Puta New Roman.).
Google Font API - Ovo je web usluga koja pruža visokokvalitetni otvoreni (otvoreni izvorni) fontovi koji se mogu lako koristiti u vašem dizajnu.
Nadamo se da zbirka fontova I dalje će rasti tako da imamo još veći izbor različitih slušalica.
Prednosti upotrebe Google Font API-ja
Ako i dalje odlučite hoćete li koristiti Google Font API, evo nekih njegovih prednosti.
Korištenje HTML teksta
Za razliku od upotrebe slika ili zamjena sa CSS. Pozadina-slika, koristeći @ font-licu, kao rješenja za atraktivniju web tipografiju, povoljnije u pogledu plana SEO..
Pored toga, nećete morati mijenjati postojeći sadržaj - ažurirajte samo svoje CSS. Stolovi.
Raspoloživost
Kao što koristite Html Tekst, a ne slika ili pozadina CSS.To ne utiče na ljude koji koriste programe za čitanje na ekranu.
Pouzdana infrastruktura i smanjeno opterećenje na vašem poslužitelju
Budući da preuzimanje vašeg @ font-lica koristi pouzdanu infrastrukturu GoogleMožete biti sigurni da će se usluga datoteke fonta biti brzo, a možete smanjiti opterećenje na vlastitom poslužitelju.
Kako koristiti Google Font API
Ne morate biti profesionalni web programer za upotrebu Google Font API. Sve što trebate učiniti je dodavati jednu stavku link stilova na svoju stranicu, nakon čega možete početi koristiti ovaj font u CSS..
Evo generalizovanog procesa upotrebe Google Font API:
Korak 1: Dodavanje veze sa stilskim listom sa odabranim fontom
Da počnemo ići zbirka fontova GoogleDa vidite koji su fontovi dostupni za upotrebu. Evo glavnog formata za uključivanje određenog fonta:
Ako vam treba font za jednokratnu upotrebu, možete proglasiti stil jednog reda.
< p style = "Porodica fontova:" Naziv fonta ", serif"\u003e Šest revizija je lijepo< / p > |
Korak 3: Uvek imate rezervnu opciju.
Ne možete obratiti pažnju na činjenicu da smo u prethodnim fragmentima koda koristili Serif kao rezervni font. To se radi kako bi se izbjegli neočekivani rezultati. To znači da ako sa serverima Google Nešto nije u redu, pretraživač može koristiti svoj standardni font Serif.. Napravite ga sa navikom kada koristite atribut font-lica, nije važno da li koristite @ font-licu ili ne, uvijek navedite dodatne fontove - ova tehnologija se naziva font setovi.
Primjer upotrebe Google Font API-ja
Kopirajte i zalijepite sljedeći blok kod u svoj Html Dokument, sačuvajte ga, a zatim otvorite u svom pretraživaču.
Predlažemo testiranje vašeg Html Dokument u različitim preglednicima, tako da možete videti razlike u pregledniku (ili njihovo odsustvo).
Možete eksperimentirati sa različitim fontovima, ali na primjer, koristili smo slušalice za jalo.
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleaaaaaaax.com/css?family\u003dlobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > Šest revizije je prelepo!< / h1 > < / body > < / html > |
Rezultat:
Zahtjev za korištenje više fontova sa Google Font API
Recimo da vam trebaju tri fonta Google direktorij fontova.. Nemojte činiti mnogo zahtjeva. Višestruki zahtjevi povećavaju broj Http. Zahtjevi. Manje količine Http. Zahtjevi smanjuje vrijeme odgovora na web stranici.
Umjesto višestruke oznake Stylesheet link, koristite sljedeći format za imovinu HREF-a jednog tabela link stilova.
Primjer u nastavku učitava sve tri fontova ( Vollkorn., Yanone. i Droid sans.) Korištenje jednog zahtjeva.
< strong > Vollkorn.< / strong > | < strong > Yanone.< / strong > | < strong > Droid + sans.< / strong > |
Sada možete koristiti bilo koju od ove tri fontove u svojim stilovima.
Na šta treba obratiti pažnju
Odvojena imena fonta pomoću | Bez razmaka. Obratite pažnju na upotrebu + u font Droid sans.. Koristite simbol + u nazivima fonta umjesto prostora.
Savjet: Koristi i veliki broj Fontovi u jednom upitu mogu povećati vrijeme odziva stranice. Učitajte samo one fontove koje stvarno trebate. Budite konzervativni.
Težina i stil fontovi fontovi font api
Težine fontovi također imaju različite parametre težine / stila. Da biste ih koristili, dodajte na naziv fonta debelog creva (:), a zatim navedite stil i težinu.
U donjem primjeru ukazujemo bold. i bold-Italic za Vollkorn., I. italic za Neoconlata..
http: //fonts.googleaaaaaax.com/css?family\u003dvollkorn: b.,bI| Neunmolata: i.| Droid + sans
Šta da obratim pažnju na
Koristite crevo (:) bez razmaka nakon naziva fonta, a zatim navedite ime stila (I.E. boditalic) ili odgovarajuće smanjenje (I.E. BI). Ako vam trebaju mnogo sorti jednog fonta, podijelite ih zarezom (,) bez razmaka.
Google Font API čini web tipografiju atraktivnijom
Industrija web dizajna aktivno traži rješenje starog problema odabira i korištenja web fontova i, poput @ font-lica je odgovor.
Naravno, postoje različiti dodaci kako bi se koristili Google Web fontovi fontovi na vašem WordPress mjestu, međutim, ako razvijate vlastitu temu, možda ćete morati zatvoriti tipografiju s njim, zaobići dodatke. Ispod ćemo pokazati kako koristiti Google Web fontove u svojoj temi.
Prvo, idemo na stranicu Google Web fontovi. I odaberite font koji moramo primijeniti u temi. Uz pomoć posebnih alata koji se nalaze na lijevoj strani, možete suziti područje pretraživanja, jer su fontovi zaista puno. Znao sam da imam fasnu serif font za naslove i nazive blogova, pa sam odabrao Serif u padajućem meniju kategorija, a zatim pomaknuo klizač debljine (debljine) udesno.
Kao rezultat toga, 617 opcije koje mi se nude glatko padne na 5. Imate dosta opcija za izvedbu pregled Fontovi - možete vidjeti kako će riječ izgledati, ponuditi, tekstualni odlomak ili poster u odabranom fontu. Možete odabrati unaprijed definirani tekst, možete odrediti svoj vlastiti tekst, odaberite željenu veličinu fonta.
Nakon što pronađete font koji želite koristiti na svojoj web stranici, jednostavno kliknite na dugme Dodaj u prikupljanje.
Možete dodati desetine fontova u vašu kolekciju. Međutim, to nije uvijek potrebno. Ako to možete, to ne znači da biste trebali to učiniti. Pokušajte se ograničiti maksimalno tri fontove. I još bolje dva. Iz razloga i dalje volim koristiti zastarjeli web siguran font za glavni tekst teksta i spremim web fontove za naslove i druge elemente koji zahtijevaju posebnu ekspresivnost ili pažnju na sebe. Komercijalno o jasnoći vaših fontova - ne biste trebali koristiti upadljiv font ako vaši posjetitelji ne mogu rastaviti ono što je napisano.
Kada dodate svoje fontove u kolekciju, vidjet ćete ih u plavom dijelu pri dnu web mjesta. Nakon što će se vaša kolekcija pojaviti fontove koje želite koristiti, jednostavno kliknite gumb Upotreba.
Nakon toga preći ćete na ekran na kojem će biti predstavljena uputa koja se sastoji od četiri koraka. Od njega ćete naučiti kako koristiti fontove. Ako želite preuzeti odabrane fontove da biste ih koristili u grafičkom uređivaču da biste ih procijenili ili napravili atraktivni snimak ekrana zaslona.png za vašu temu, a zatim samo kliknite na gumb za preuzimanje na vrhu stranice. Ako samo želite koristiti font u svojoj temi, onda ga ne morate preuzeti na računar.
U prvom koraku možete odabrati stilove i debljinu dodatka. U drugom koraku možete odabrati skup znakova koje želite povezati. Možete i procijeniti kako će vaša kolekcija fontova odraziti na brzini učitavanja stranice.
Sada idemo na treći korak, što više nije tako jednostavno kao i prethodni. U trećem koraku dobivamo kôd koji morate dodati na naša mjesta - tri različite opcije. Odabrali smo standardnu \u200b\u200bopciju - međutim, mi ćemo somnake nešto s Google-ovih uputstava kako bismo podržali utvrđene metode za dodavanje stilova u WordPress teme. U kodu za standardnu \u200b\u200bverziju kopirajte samo URL, koji je naveden kao HREF atribut za oznaku veze.
Zatim otvorite datoteku funkcija.php teme. Stvorit ćemo značajku za preuzimanje CSS-a, koje ćemo koristiti u našoj temi:
Funkcija GGL_OLD_STYLES () ()
Pogledajte GGL prefiks iz moje funkcije? Ovo je jedan od uspješnog WordPress-ovog liječnika. Uvijek dodajte prefiks naziva vaših funkcija u WordPress-u kako biste smanjili rizik od sukoba s drugim funkcijama u vašoj temi, podružnica ili dodatka.
Sada u ovoj funkciji moramo registrirati naš tablica stilova primljenih od Googlea:
Funkcija GGL_OLD_STYLES () (ako (! Is_admin ()) (wp_register_style ("GoogleFont", "http://fonts.googleaaps.com/css?family\u003dholtwree +one+sc|rouge+Script");)
Koristimo WP_REGISTER_STYLE funkciju. Prvi argument je deskriptor, I.E. Smanjenje koje možemo koristiti za žalbu na ovu stilističku tablicu u budućnosti u našem kodu. Drugi argument je put do datoteke. Koristimo URL koji smo dobili u trećem koraku Google-uputa.
Dalje, povezujemo naš osnovni tablicu stila za našu temu. Nadam se da niste postavili oznaku veze u odjeljak za glavu vašeg zaglavlja. Ako je to slučaj, vrati se na datoteku i izbrišite ovaj kod. Zatim priključite tablicu u stil u datoteci funkcija.php:
Funkcija GGL_OLD_Styles () (ako (! Je_admin ()) (wp_register_style ("GoogleFont", "http://fonnts.googleaaps.com/css?family\u003dholtwree +one+sc|rouge+script"); wp_enqueue_style ("ggl ", get_stylesheet_uri (), niz (" Googlefont ");))
Koristimo WP_ENQUEUE_Style funkciju. Ima iste argumente kao i wp_register_style. Prvo vežemo deskriptor našem stilističkom stolu. Zatim nađite put do našeg stilskog stola. Srećom, u WordPress-u možete dobiti put putem funkcije get_stylesheet_uri (). Nakon toga ukazujemo na zavisnost. Naša datoteka u stilu.css ovisi o Google Web Fontovima u tablici u stilu.
Konačno, koristimo kuku WP_ENQUEUE_Scripts da biste pozvali našu funkciju:
Funkcija GGL_OLD_Styles () (ako (! Je_admin ()) (wp_register_style ("GoogleFont", "http://fonnts.googleaaps.com/css?family\u003dholtwree +one+sc|rouge+script"); wp_enqueue_style ("ggl ", get_stylesheet_uri (), niz (" Googlefont "));)) add_action (" wp_enqueue_scripts "," ggl_load_styles ";
Sa Functions.php datotekom je gotova. Sada smo ostavili da napravimo zadnji korak da bismo koristili odabrani font. Četvrti korak B. google-ove upute Prikazuje koje vrijednosti moramo preći na imovinu porodice fontova da bismo koristili naš font. Želim da radim sve svoje naslove sa Holtwoodom Jednoj SC:
H1, H2, H3, H4, H5, H6 (Porodica font: "Holtwood One SC", Serif;)
I želim napraviti opis stranice, želim napraviti rouge skriptu font:
Stranica - opis (porodica font: "Okrugla skripta", kurzivna;)
Sve! Nema više ništa! Dodali ste fontove Google Web Fontova na vašu WordPress temu. Koristite ih odgovorne!
