Kako povezati CSS fontove: Uputa

Ako ste dizajner ili webmaster, vjerojatno ćete znati povezati CSS fontove. Ako ste vlasnik malog bloga i odlučite ukrasiti svoj resurs i unijeti ga jedinstveno, onda bi vam ovo znanje trebalo pomoći. Ali, to je bolje onda početi od samog početka da shvate što CSS, fontove gdje se mogu dobiti i gdje ih instalirati.

opis

Dakle, odgovor na način povezivanja CSS fonta s web lokacijom mora početi s opisom izravno formalnog jezika. CSS je kaskadni stilski list. Taj se jezik koristi kao opis izgleda dokumenta. Djeluje zajedno s označnim jezikom.

CSS radi kako bi ukazao na vizualne značajke stranica na Internetu. Potonji bi trebao biti izrađen na temelju posebnih označnih jezika HTML ili XHTML.

korištenje

Tko treba CSS? Spojite fontove, postavite boje, organizirate blokove i sl. Za webmastere, programere, koji rade na izradi web mjesta. Glavni zadatak kaskadnih stilskih listova je vizualno podijeliti strukturiranje. To jest, ako HTML oblikuje čvrsti blok teksta, CSS pomaže da uvjetno "ukrašava" ovaj blok, odabere elemente, dodjeljuje parametre.

Odvajanje pruža dokument s pristupačnosti, veću fleksibilnost i sposobnost upravljanja. Omogućuje vam uklanjanje složenih i ponovljivih elemenata sadržaja.

veza

Prije nego što shvate kako pravilno spojiti fontove u CSS, morate shvatiti kako su CSS sinkroniziran s datotekom. Njihova se pravila primjenjuju na istom jeziku. Sam stilski stil dobio je CSS pravila, koja koristi. Tablice mogu biti u vizualno uređenom dokumentu ili u zasebnoj datoteci s nastavkom. U takvoj datoteci obično se nalaze samo naredbe i bilješke.

Tako postaje jasno da možete povezati stilske listove na nekoliko načina. Razmotrite ih dalje.

metode

Postoje četiri opcije koje će vam pomoći povezati CSS Fontovi, dodijeliti boju, identificirati blokova, i tako dalje. D. Kao što je ranije spomenuto, skup pravila može biti u datoteci pisane u HTML jeziku. Ali ovu opciju ne sviđaju mnogi dizajneri. To uzrokovano činjenicom da je u to vrijeme na cijelom webu timovi teško pronaći i opisati parametre na sve to proslaviti. Mnogo je lakše dodijeliti stilove u zasebnom dokumentu.

Ako se CSS nalaze odvojeno, povezani su putem oznake . Mora biti smještena unutra i . U toj oznaci morate odrediti atribut href, koji će prikazati adresu u datoteku s CSS-om.

Ako se naredbe ponovno prikupljaju posebnom datotekom, povezujemo ih s web dokumentom određivanjem @import. Mora biti napisana između oznaka. Odmah poslije

Sljedeće dvije metode odnose se na situaciju u kojoj je CSS postavljen izravno u dokument koji želite "ukrasiti". Stilovi u ovom slučaju mogu biti između oznaka. Četvrti način uključuje postavljanje pravila na temelju jedne od oznaka, putem atributa stila. Zatim će pravila utjecati na zasebni parametar koji je unutar granica određenog teksta.

Prve dvije metode obilježile su izgled vanjskih stilskih listova, a drugi - unutarnji.

fontovi

Zašto koristiti općenito fontove? Naravno, svaki vlasnik web mjesta želi da njegov resurs izgleda ne samo lijep, već i jedinstven. Želim staviti na stranice posebnih elemenata koji bi se mogli izdvojiti među svima. Također, često primijetite naslove ili izbornik nestandardnog pravopisa.

Ima puno pitanja o tome. Možda su webmasteri koristili sliku u Photoshopu. Možda je to bio slučaj s Flashom. Postoji opcija koja koristi jаvascript. No, kao što pokazuje praksa, prva opcija je neugodno i sporo, druga je zastarjela, a treća je previše zamorochenny. Da biste stvorili nešto novo i lijepo, možete pokušati povezati CSS fontove.

nekretnine

Vrijedno je razumjeti da u našem slučaju fontovi nisu samo određeni stil, već i skup određenih svojstava potrebnih za upravljanje vanjskim vrsta teksta. Možete upotrijebiti nekoliko opcija. Dodijelite određeni font za naslov, odlomak, citat, tekst tijela, izbornik i tako dalje.

Unatoč činjenici da korisnik može koristiti veliki izbor stila, veličina, zasićenja i tako dalje. E., važno je ne zaboraviti čitljivost. Bolje je izbjeći veliku gomilu različitih stilova. Dovoljno je imati dva slova na stranici.

obitelj

Da biste mogli odabrati stil fonta, koristite obiteljski font-obitelj. To je vrlo teško razumjeti jasno postoji li čitatelj PC svog resursa specifične fonta, bolje je da unesete sve opcije iste vrste. U tom će slučaju web preglednik odabrati onaj koji se nalazi u korisničkom sustavu.

Ova obitelj ima niz značenja. Na primjer, ime obitelji predstavljeno je nazivom obitelji fonta. Vrijednost generičke obitelji definira pet najboljih obitelji fontova.

Obitelj fontova je odgovorna za odabir fontova. Ovaj stil je također naslijeđen, kao i prethodni. Među značenjima je uobičajena ili kosa crta i kurziv. Stil varijacije fontova je odgovoran za malena velika slova. Za zasićenje, koristite font-weight, itd. Font možete dodijeliti veličinu i boju.

Nestandardno rješenje

Osim standardnih fontova, možete koristiti i nestandardna rješenja. Obično su više jedinstvene i najvjerojatnije ih nećete primijetiti na mjestima konkurenata. Za to ne morate koristiti slike, jаvascript i flash. Dovoljno je uzeti pravilo @ font-face. Omogućuje korisniku da prenese vanjsku datoteku u dokument.

Ova metoda omogućuje povezivanje CSS-a s fontom OTF i TTF. To su posebni formati koji dobro funkcioniraju sa sličnim zadacima. Problemi se mogu pojaviti samo pomoću preglednika Internet Explorer. Unatoč činjenici da je 1997. godine počeo koristiti fontove trećih strana, sada postavlja stroge zahtjeve.

Mnogo toga radi uništavanja vašeg posla. Često može komprimirati font datoteku, ponekad se može šifrirati. Stoga, postoje sve vrste hackova.

formati

Sada postoji nekoliko formata fontova koje morate znati. Inače ćete naići na niz nedosljednosti i nekompatibilnosti. Možete povezati CSS TTF font. Taj format sada podržavaju svi web preglednici. Izuzetak može biti verzija preglednika Internet Explorer 8 i niže, kao i Opera Mini 5.0-8.0.

S EOT-om samo IE može raditi. Situacija s WOFF-om je ista kao i kod TTF-a. No SVG funkcionira u preglednicima Chrome do 37 verzija, kao i Safari, iOS Safari, Android Browser. Kao što pokazuje praksa, najbolje je koristiti TTF. Ovo je najopsežnija opcija koja rijetko uzrokuje probleme. On je najčešći.

pravilo

Dakle, za spajanje otisak jednog od gore navedenih formata, obično dovoljno za korištenje @ font-face, koje smo spomenuli ranije. Da biste bili jasni, morate slijediti određeni algoritam. Imate font.ttf datoteku fonta. Da biste je koristili za glavni tekst, najprije morate kopirati datoteku u mapu u kojoj se nalaze sve datoteke web mjesta.

Ako želite koristiti više od jednog fonta, možete izraditi posebnu mapu u koju ćete ih prenijeti. Zato vam je mnogo lakše pronaći i promijeniti sadržaj takve mape.

Sada trebamo osigurati da preglednik automatski učitava font. Da biste to učinili, trebate mu dati upute. Upotrebljavamo direktivu @ font-face. Naš tim će izgledati ovako:

@ font-face {

font-obitelj: MyUniqueFont;

src: url (`fonts / font.ttf`);

}

Naredba font-family odgovara fontu da dobije svoje ime i nakon što se može koristiti za pisanje stila. U drugom retku nalazi se pokazatelj puta kojim preglednik treba pronaći stil i povezati ga. Ovo nije univerzalna adresa. Ovisno o tome gdje ste stavili datoteku fonta, ovaj način također će se razlikovati. Na taj ćete način saznati kako povezati CSS font iz mape.

veze

Ako ne znate povezati više CSS fontova, tu je i uputa o tome. Omogućuje vam da odredite više datoteka odjednom. Na primjer, mogu se povezati s desetak. Da biste to učinili, morate upotrijebiti pravilo iznad @ font-face. Slijedeći primjer kako ste prethodno spojili jednu datoteku iz mape, na isti način iz nove linije navodite veze na druge inačice fonta.

Ako je vaša web-lokacija izgrađena na temelju WordPressa, povezivanje stilova još je jednostavnije. Kada trebate zamijeniti obris naslova, jednostavno se prijavite na administratorsku ploču. Tamo potražite "Tematske postavke". U odjeljku tipografija bit će čitav popis različitih opcija. Samo trebate odabrati i spremiti promjenu.

Ostale opcije

Vrlo često povezivanje fontova upotrebljava Google Fonts uslugu. Ovo je popularan alat za odabir i povezivanje stilova. Postoji ogroman broj skupova fontova. Da biste ih povezali, samo idite na službenu web stranicu.

Prije nego što budete čitav popis primjera i prilika za eksperimentiranje. Nakon što dodate željeni stil, ne zaboravite odabrati ćirilicu ako je vaš izvor na ruskom. Zatim možete odabrati veličinu, stil ili odabrati nekoliko opcija za sve prilike.

Nakon što kôd bude spreman za instalaciju u CSS datoteku. U tom se slučaju primjenjuje i pravilo metoda dodavanja. Na primjer, ako su stilski listovi predstavljeni zasebnim dokumentom, tada se naredba šalje na prvi redak. Ako vam stilski listovi budu izravno u HTML datoteci, trebate je dodati u tijelo oznaka.

nalazi

Dodavanje novih fontova na vašu web stranicu nije teško. Važno je odmah odlučiti s metodama i mogućnostima. Ovisno o sustavu na kojem je vaša web-lokacija, morate promišljati ove radnje. Ako imate samoprodajni resurs, nema mnogo opcija. Ako, primjerice, na WordPressu, ova operacija je mnogo jednostavnija nego što se čini.