Nestandardni web fontovi u izgledu. Google fontovi i webfont
Prvi dio poglavlja posvećen je predstavljanju CSS fontova. Na ovoj stranici ćete naučiti kako uključiti fontove u CSS, što su web fontovi i kako raditi s njima, koji formati fontova postoje i kako koristiti Google Fontove. Prvo, pogledajmo jednostavan primjer povezivanja CSS fonta:
P (familija fontova: Verdana; )
Ovaj mali dio koda znači da za sve oznake
Font koji se koristi je Verdana. Svojstvo font-family navodi koji će se font ili obitelj fontova koristiti. Ispravan prikaz ovog stila u pregledniku korisnika ovisi o tome hoće li dati font. U našem slučaju, ako računalo korisnika nema Verdana font, preglednik će prikazati zadani font.
Svojedobno su dizajneri morali dodatno odrediti nekoliko rezervnih fontova u slučaju da korisnikovo računalo nije imalo glavni. Recimo da želite oblikovati tekst u fontu Verdana i instalirati Trebuchet MS, Geneva i bilo koji sans-serif font kao rezervne fontove. Napisano je ovako:
P (familija fontova: Verdana, "Trebuchet MS", Geneva, sans-serif; )
Prilikom obrade ovog koda, preglednik će prvo provjeriti prisutnost Verdana fonta na računalu korisnika. Ako je font prisutan, sadržaj oznaka
Bit će prikazan u ovom fontu. Ako font nedostaje, preglednik će provjeriti prisutnost sljedećeg fonta na popisu - Trebuchet MS. Ako i ovaj font nedostaje, provjerit će se prisutnost sljedećeg fonta - Geneva. Ako računalo korisnika nema Geneva, preglednik će odabrati drugi dostupni sans serif font i prikazati tekst u tom fontu.
Napomena: u kodu smo napisali naziv Trebuchet MS fonta pod navodnicima. Naziv fonta potrebno je staviti u dvostruke ili jednostruke navodnike kada sadrži razmake.
O tome što je serif (serif) i sans-serif (sans-serif) font možete pročitati na stranici Wikipedije.
Web fontovi
Gore navedeni način korištenja fontova ima veliki nedostatak - ograničeni ste u broju fontova. Morat ćete se zadovoljiti samo onim opcijama koje su najvjerojatnije instalirane na većini računala.
Kako možete povećati izbor fontova kako bi dizajn stranice bio individualan i dodao originalnost? Web fontovi dolaze u pomoć. Pročitajte dalje poglavlje i naučit ćete kako raditi s njima.
Dakle, da bi se željeni font prikazao u korisnikovom pregledniku, potrebno je da se taj font preuzme na njegovo računalo. Ovo je vrlo lako učiniti. Ova metoda povezivanja fontova s CSS-om otvara doista široke mogućnosti dizajnerima. No vrijedno je spomenuti nuždu u glavi: prvo, ne podržava svaki preglednik određeni format fonta (što će dovesti do toga da se font neće prikazati), a drugo, ako je datoteka fonta velika, to može usporiti učitavanje stranice.
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: Uvijek možete pronaći ažurirane informacije o podršci za format fonta na caniuse.com. Morate unijeti naziv formata (na primjer, ttf) u traku za pretraživanje.
Ako se fokusirate na moderni preglednici, morat ćete koristiti samo TTF format fonta - najčešći i korišten. U slučaju kada trebate imati nekoliko formata jednog fonta, možete koristiti posebne online pretvarače iz jednog formata u drugi, a zatim povezati sve datoteke jednu po jednu. Na taj način preglednik može odabrati format fonta s kojim radi.
Povezivanje web fonta pomoću @font-face
Recimo da imate vlastiti jedinstveni font koji se zove MyUniqueFont u TTF formatu i želite da glavni tekst web stranice bude prikazan u ovom fontu. Prva stvar koju trebate učiniti je kopirati datoteku fonta u mapu u kojoj se nalaze sve ostale datoteke stranice. Kako biste izbjegli stvaranje nereda, možete stvoriti zasebnu mapu posebno za fontove, nazovite je, na primjer, fontovi.
@font-face (familija fontova: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )
Svojstvo font-family u ovom slučaju igra drugačiju ulogu: uz njegovu pomoć dodjeljujemo ime fontu, tako da to ime možemo koristiti pri pisanju stila:
P (familija-fontova: MyUniqueFont; )
Drugi red navodi stazu do datoteke fonta. U našem primjeru, datoteka MyUniqueFont.ttf nalazi se u mapi fontova. Vaš URL može biti drugačiji.
Google Fontovi
Google omogućuje jednostavno povezivanje bilo kojeg fonta iz Google zbirke fontova. Sve što trebate učiniti da počnete koristiti font koji vam se sviđa je odrediti nekoliko postavki na Google stranici fonta, zatim kopirati određenu poveznicu na taj font i dodati ga u svoj web dokument.
Bilješka: cijela zbirka Google fontova dostupna je na web stranici Google Fontovi. Na stranici možete koristiti razne filtre za pretraživanje fontova prema kategoriji, debljini i abecedi.
U nastavku ćemo opisati svaki korak povezivanja Google fonta. Da biste razumjeli što je rečeno, odaberite bilo koji font s Google stranice Fontove i otvorite ga klikom na gumb za brzo korištenje.
Korak 1: Odaberite stil
Prije svega, na stranici odabranog fonta prikazat će se opcije za njegov stil, kao i ikona brzinomjera, što znači ništa više od brzine učitavanja fonta. Što više stilova fonta odaberete, dulje će trajati učitavanje. Stoga se preporuča odabrati samo one opcije stila koje planirate koristiti.
Korak 2: Odaberite abecedu
Dalje na stranici možete odabrati skup znakova: latinicu, ćirilicu itd. Ovisno o fontu, u njemu možda neće biti dostupne sve opcije abecede. Slično prethodnoj točki, bolje je označiti okvir samo nasuprot abecede koja će biti potrebna.
Korak 3: Dodajte kod na web mjesto
Prva metoda uključuje dodavanje veze na Google poslužitelj u HTML kod, odakle se preuzima font. Trebate kopirati gotov dio koda i postaviti ga između oznaka
u vašem HTML dokumentu. Primjer:...
Drugi način je povezivanje fonta pomoću direktive @import. Gotov kod koji se nalazi u drugoj kartici točke 3 na stranici odabranog Google fonta. Mora se dodati na sam početak vašeg lista stilova (inače datoteka neće biti uvezena). Kod izgleda otprilike ovako:
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);
Posebnost prve metode je da ćete morati dodati vezu na font u zaglavlju svake stranice na kojoj ga namjeravate koristiti. To je lako učiniti na stranicama s malim brojem stranica, ali problematično za velike resurse. Druga metoda je prikladna jer se kod može postaviti na sam početak vanjskog lista stilova, a zatim će sve stranice na koje je ova tablica povezana dobiti potreban font koji će se učitati pomoću direktive @import.
Korak 4: Stvorite stil
Nakon dovršetka prethodnih koraka, možete početi primjenjivati font. Kako je ovo napisano? CSS pravilo, već ste vidjeli:
P (familija fontova: "Roboto", sans-serif; )
Ako ste u prvom koraku odabrali nekoliko opcija za stil (na primjer, dodali opciju podebljano Podebljano 700), tada će se kod u trećem koraku malo promijeniti:
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
Da biste zatim podebljali font, napišite CSS stil ovako:
P (familija fonta: "Roboto", sans-serif; težina fonta: 700; )
Bilješka: U Google Fontovima koriste se samo konvencionalne jedinice od 100 do 900 za označavanje težine fonta, dakle, normalna težina (prema zadanim postavkama) je ekvivalentna vrijednosti od 400 (normalno), a standardna podebljana težina je ekvivalentna 700 (podebljano).
Glavne prednosti Google servis Fontovi su:
- jednostavnost korištenja (čak i početnik može razumjeti uslugu, a sav potreban kod se generira automatski - sve što trebate učiniti je kopirati);
- dostupnost fontova (nema potrebe za plaćanjem);
- dostupni su svi korišteni formati fonta (to znači da će svaki preglednik moći preuzeti točno onaj format fonta s kojim radi).
Među nedostacima usluge je to što ne postoji velika raznolikost fontova, posebno ćiriličnih. Usput, na Internetu postoje i druge slične usluge, na primjer, TypeKit (plaćeni).
Rezultati
Danas imamo nekoliko dostupnih opcija za povezivanje originalnih i nestandardnih fontova s web stranicama. Svaka od ovih metoda ima svoje prednosti i nedostatke. Koju opciju je bolje koristiti, morate sami odrediti. To često ovisi o situaciji, a različiti pristupi mogu biti korisni u različitim slučajevima. U ovom trenutku samo trebate znati kako koristiti fontove u CSS-u.
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // prikaži veličinu moje sličice?>
U ovoj lekciji ćemo pogledati kako uključiti web fontove u izgled. Web fontovi dodatna su slova koja se koriste kako bi dizajn bio jedinstveniji ili raznolikiji. Povezivanjem fonta na stranici osigurava se njegov ispravan prikaz u svim preglednicima, a nije bitno ima li ga korisnik instaliran ili ne.
Kako spojiti font iz Google Fontova
Korak 1 - odaberite font
Servis Google Fontovi ima velik skup web fontova koji se mogu povezati s projektom u jednom retku i odmah koristiti CSS stilovi. Da biste za pregled odabrali samo ćirilične fontove, u filteru lijevo u parametru Skripta morate odabrati Cyrillic (za ćirilicu) ili Cyrillic Extended (za proširenu ćirilicu). Nakon toga, desno će se prikazati fontovi koji podržavaju ćirilicu.
Za brzo korištenje kliknite na gumb Quick Use.
Korak 2 - podesite postavke fonta
Na sljedećoj stranici biramo stilove fonta koje ćemo koristiti. OpenSans font ima 10 težina, od vrlo tankih do ekstra podebljanih. Što više stilova odaberete, to će više utjecati na brzinu učitavanja stranice. Stoga biste trebali uključiti samo fontove koje koristite. Nakon toga možete odabrati skupove znakova za ćirilicu, odabrati Cyrillic Extended ili Cyrillic i Latinicu.
Korak 3 - kod za povezivanje fonta
Zatim uzimamo redak koda za povezivanje s vašom web stranicom. Standardna opcija je povezivanje css datoteke treće strane iz html-a, na kartici @import bit će red za povezivanje preko css datoteke, a treća opcija za Javascript. Nakon toga, veza je spremna i možete koristiti ovaj font u svom izgledu. Blok ispod prikazuje primjer kako pristupiti fontu: font-family: "Open Sans", sans-serif;
Širinu postavljamo pomoću parametra font-weight: 300; ili font-weight: 400; težina fonta: 800; Kurziv - preko font-style: italic; .
Primjer upotrebe
Kao rezultat toga, ako smo odlučili uključiti font putem @import u CSS, naša CSS datoteka izgledat će ovako:
/* Povezivanje fonta*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); /* Definirajte stil za zaglavlje h1 */ h1( /* Odaberite povezani font "Open Sans" kao tip slova */ font-family: "Open Sans", sans-serif; /* Odaberite debljinu fonta 300, što će odgovara stilu Light - za tanku veličinu*/ font-weight: 300;
Font igra važnu ulogu u dizajnu stranice; može naglasiti cjelokupni stil i pomoći korisniku u kretanju kroz tekstualni sadržaj. Potražite besplatne fontove, a zatim povežite hrpu datoteka za različitim preglednicima– nije nagrađivan zadatak, ali postoji izlaz – fontovi iz Google Fontova.
Pronalaženje pravog fonta putem Google Fontova
Idemo na samu uslugu Google fontova i pogledajmo njene mogućnosti.
U lijevom (bočnom) panelu možete konfigurirati parametre filtriranja fonta 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čenica, odlomaka, postera. Promijenite veličinu fonta i unesite svoj tekst umjesto demo opcije.
Povezivanje fonta iz Google Fontova
Nakon što ste odabrali željeni font kliknite na gumb “brzo korištenje” (pogledajte sliku ispod)
Na stranici povezivanja fonta trebate odabrati:
1. Stilovi fonta, podebljanost, kurziv itd. Nemojte previše ubrzavati, birajte samo najnužnije, jer... sve to utječe na brzinu učitavanja fonta i, sukladno tome, na brzinu učitavanja teksta na vašoj stranici. Pratite očitanja senzora s desne strane (točka 5 na slici)
2. Odaberite koje znakove trebate u ovom fontu (uglavnom latinicu i ćirilicu).
3. Kopirajte kod oznake veze u blok HEAD
4. Koristite deklaraciju fonta u stilovima kao što je prikazano u koraku 4 (pogledajte sliku)
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 mehanizam. To znači da ili morate koristiti dodatke, kojih ima mnogo, ili zaprljati ruke petljanjem s kodom.
Dobra vijest je da možete instalirati bilo koji font iz Google knjižnice na gotovo bilo kojoj WordPress temi bez puno muke. Kako točno - naučit ćemo vas danas.
Postoje dvije opcije - spojite dodatak ili se malo poigrajte s datotekom functions.php.
Ali prvo bih želio nabrojati prednosti i nedostatke Google Fontova kako biste konačno mogli odlučiti hoćete li ih koristiti u svojim projektima ili ne.
Dobri i loši Google Web Fontovi
Kada je riječ o web fontovima, Google je jedna od najboljih opcija u smislu izvedbe . Sve zbog laganog dizajna i sustava predmemoriranja. Posjetitelji ne bi trebali čekati da se Google fontovi učitaju ako su nedavno posjetili web mjesto koje ih je koristilo. Popularni fontovi kao što je Open Sans mogu poboljšati izvedbu vaše web stranice smanjenjem vremena učitavanja.
Druga značajka je ta Google vam omogućuje preuzimanje ovih fontova , tako da ih možete koristiti u svojim izgledima.
I konačno platforma je potpuno besplatna . Da biste počeli koristiti fontove, samo se trebate prijaviti ili kreirati poštanski sandučić na Gmail (tko nema Gmail ovih dana?).
Među nedostacima moguće je naznačiti da Izbor Google fontova je mali , mnogi od njih su slični jedni drugima. Morate potrošiti puno vremena na traženje kako biste pronašli pristojan, originalan font. Postoji vrlo malo fontova za ćirilicu.
Osim ovoga, postoje i uobičajeni sigurnosni problemi – morate dati neke osobne podatke kada instalirate Google fontove na svoju stranicu.
Kako instalirati Google Fontove pomoću WordPress dodataka
Ako tražite dodatke, prvo što ćete vidjeti u rezultatima pretraživanja je Dodaci WP Google Fontovi i Easy Google Web Fonts . Ovo su doista dva najbolja dodatka.
Dodaci nisu idealno rješenje za Google instalacije-fontovi na web-mjestu WordPress - 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 su dodaci bolji, pogledajte ove dvije opcije.
Ovaj vam dodatak omogućuje ciljanje određenih elemenata kao što su H1 naslovi, odlomci i citati. Dobivate i prilagođenu CSS opciju za daljnji rad s pojedinačnim stilovima fonta. Dodavanje i prilagodba Google fontova na vašu WordPress stranicu vrlo je jednostavno s ovim dodatkom.
Easy Google Web Fonts opravdava svoje ime i čini instalaciju Google Fontova iznimno jednostavnom čak i za početnike. Možete koristiti Live Preview za pretpregled, testiranje i optimiziranje fontova bez napuštanja svoje web stranice i stvaranje vlastitih pravila za fontove bez pisanja retka koda.
Ispravan način za instaliranje Google Fontova u WordPress predlošku
Na kraju dolazimo do opcije da otvorimo datoteku functions.php i malo se poigramo s kodom. Prije nego što to učinite, trebate odabrati font iz Googleove biblioteke. Za primjer, pokušajmo uzeti vrlo popularan Otvori Sans.
Zatim morate odabrati stil fonta - normalno, podebljano ili kurziv. Ovo možete sami :)
Nakon što odaberete stilove, Google će vam dati isječak koda. Naš izgleda ovako:
Osim toga, dobili smo CSS stil:
obitelj fontova: "Open Sans", sans-serif;
Sada je vrijeme da otvorite datoteku functions.php (put do 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,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");
Ključ ove značajke je naredba "wp_enqueue_style", koja uzrokuje da WordPress poziva stilske listove fonta u zaglavlju svake stranice. Ako bolje pogledate, vidjet ćete da smo uklonili vezu href= i rel='stylesheet' type'text/css' iz koda koji nam je dao Google i morat ćete učiniti isto ako želite dodati bilo koji drugi Google font za vašu WordPress stranicu.
Sve što sada trebate učiniti je otvoriti glavnu CSS datoteku i zalijepiti je u stilu s Open Sans. Ovdje se primjenjuju uobičajena pravila, stoga dodajte sljedeći kod u svoju tablicu stilova, spremite i ažurirajte:
tijelo
{
font: normal 1em "Open Sans", sans-serif;
boja: #313131;
}
Ovaj će stil funkcionirati na cijeloj stranici. Možete postaviti drugačiji stil za pojedinačne fragmente teksta:
Podebljani tekst
{
font: bold 1em "Open Sans", sans-serif;
}
Kao što vidite, sve je zapravo vrlo jednostavno. Probajte i provjerite rezultat :)
Pozdrav svima! Danas vam želim reći kako koristiti Google Fonts API za umetanje fontova koji su vam potrebni.
S lijeve strane možete vidjeti filter, a desno su primjeri raznih fontova. Odaberite bilo koji koji vam se sviđa. Zatim kliknite na gumb brza upotreba.
Nakon toga, pred vama će se pojaviti stranica na kojoj možete odabrati željeni stil fonta.
Na primjer, odaberimo normalni (400) i podebljani (700) stil.
Ispod, pod brojem 3 , možete pronaći kod za ugradnju. Radije bih odabrao povezivanje s datotekom stilova, pa ću kliknuti karticu @uvoz. Kopirajte ovaj kod.
Kreirajmo sada datoteku index.html s odlomkom teksta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, službeno?
Uključimo našu tablicu stilova u oznaku glava
I u listu stilova, na početku datoteke, zalijepite kopirani kod.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
Ja sam odabrao font Otvori Sans kao primjer. On je prvi.
Na stranici s fontom, pod brojem 4 , možete pronaći stil koji nam treba. Kopirajmo ga i primijenimo na naš paragraf.
P (familija fontova: "Open Sans", sans-serif; )
Sve! Sada možete uživati u svom novom fontu!
Ali ne zaboravite da smo također odabrali odvažan stil. Da biste ga koristili, samo napišite težina fonta s brojem koji ste odabrali na stranici. U mom slučaju - 700 .
P(
obitelj fontova: "Open Sans", sans-serif;
težina fonta: 700;
}
Kao i podebljanje, možete koristiti i kurziv ako ste ga odabrali na web mjestu.
Tako je jednostavan za korištenje google fontovi. Na kraju, vrijedi samo reći da svi ti fontovi učitavaju vašu stranicu. Da biste to učinili, kada odaberete font na web mjestu, s desne strane nalazi se indikator koji pokazuje koliko dugo će se stranica učitavati. Pazite da broj ne bude prevelik i koristite samo one fontove koji su vam stvarno potrebni. Ne biste trebali odabrati sve stilove odjednom, nikad ne znate koliko će biti korisni.
Dakle, to je to. Hvala vam na pažnji i vidimo se uskoro!
