Kako povezati CSS fontove: upute

Ako ste dizajner ili webmaster, najvjerojatnije ćete znati povezati CSS fontove. Ako ste vlasnik malog bloga i odlučili ukrasiti svoj resurs i učiniti ga jedinstvenim, onda bi vam to znanje trebalo pomoći. Ali bolje je početi od početka, razumjeti što su kaskadni stilovi, gdje se mogu naći fontovi i gdje ih instalirati.

Opis

Dakle, odgovor na to kako priložiti CSS font na stranicu, mora započeti opisom izravno formalnog jezika. CSS je kaskadni stil. Ovaj se jezik koristi kao opis izgleda dokumenta. Radi u uparivanju s označni jezikom.



CSS nastoji ukazati na vizualne značajke stranica na Internetu. Potonje bi trebalo stvoriti na temelju posebnih HTML ili XHTML označnih jezika.

Korištenje

Tko treba CSS? Povežite fontove, postavite boje, postavite blokove i još mnogo toga za webmastere, programere koji rade na izradi web-lokacije. Glavni zadatak kaskadnih stilskih listova je vizualno podijeliti strukturiranje. To jest, ako HTML formira čvrsti blok teksta, CSS pomaže uvjetno "ukrasiti" ovaj blok, istaknuti elemente i dodijeliti opcije. Razdvajanje pruža dokumentu pristupačnost, veću fleksibilnost i kontrolu. Omogućuje vam da se riješite složenih i repetitivnih elemenata sadržaja.

Povezivanje

Prije razumijevanja kako ispravno priključiti fontove na CSS, morate shvatiti kako kaskadni stilovisinkronizirati s datotekom. Pravila se primjenjuju na istom jeziku. Sam stil je dobio CSS pravila koja koristi. Tablice se mogu nalaziti u vizualno uređenom dokumentu iu zasebnoj datoteci s nastavkom .css. U ovoj se datoteci obično nalaze samo naredbe i bilješke.



Jasno je da se stilski list može povezati s nekoliko metoda. Razmotrimo ih dalje.

Metode

Postoje četiri opcije koje mogu pomoći u povezivanju fontova, CSS-a, dodijeliti nijansu, definirati blokove itd. Kao što je ranije spomenuto, skup pravila može se nalaziti u datoteci napisanoj u HTML-u. Ali ovaj dizajn ne voli mnoge dizajnere. To je zbog činjenice da je teško pronaći parametre u cijelom platnu timova i sve to učiniti. Mnogo je lakše dodijeliti stilove zasebnom dokumentu. Ako se CSS nalazi odvojeno, oni su povezani preko oznake. Treba ga smjestiti unutar i. U ovoj oznaci morate navesti atribut href koji će prikazati adresu u CSS datoteci. Ako se timovi ponovno sastave u zasebnoj datoteci, spojit ćemo ih na web dokument putem @import instrukcije. Potrebno je pisati između oznaka. Odmah nakon. I četvrta metoda uključuje postavljanje pravila u osnovu jedne od oznaka, kroz atribut stila. Tada će pravila utjecati na poseban parametar unutar određenog teksta.

Prve dvije metode označile su pojavu vanjskih stilskih listova, a druga - unutarnje.

Fontovi

Zašto se fontovi općenito koriste? Naravno, svimavlasnik web-lokacije želi da resurs izgleda ne samo lijepo, nego i jedinstveno. Želio bih staviti na stranice posebne stavke koje bi se mogle rasporediti među svima. Također ćete često primijetiti zaglavlja izbornika ili nestandardna pisanja. Ima mnogo pitanja o tome. Možda su webmasteri koristili sliku prikazanu u Photoshopu. Možda je ova verzija došla s Flashom. Postoji varijanta koja koristi javascript. No, praksa pokazuje da je prva opcija neudobna i spora, druga je zastarjela, a treća je previše smrznuta. Da biste stvorili nešto novo i lijepo, možete pokušati povezati CSS fontove.

Svojstva

Vrijedi shvatiti da u našem slučaju fontovi nisu samo određeni stil, već i skup svojstava potrebnih za kontrolu izgleda teksta. Postoji nekoliko mogućnosti za korištenje. Dodijelite određeni font za zaglavlje, odlomak, citat, glavni tekst, izbornik itd.
Unatoč činjenici da je korisniku na raspolaganju velika raznolikost fontova, veličina, zasićenosti itd., Važno je ne zaboraviti čitljivost. Najbolje je izbjegavati veliku akumulaciju različitih stilova. Na stranici će biti dovoljno dva fonta.

Obitelji

Kako biste mogli odabrati stilove fontova, koristite obitelj obitelji fontova. Vrlo je teško razumjeti jasno ima li čitatelj vašeg izvora određeni font, bolje je napisati sve iste vrste opcija. U tom slučaju, preglednik će odabrati jedan od njih koji će se naći u korisničkom sustavu. Postoji nekoliko vrijednosti u zbirci. Na primjer, prezimepredstavljeno obiteljskim imenom fonta. Vrijednost generičke obitelji određuje prvih pet obitelji fontova. Obitelj fontova je odgovorna za odabir dizajna. Ovaj stil je naslijeđen kao i prethodni. Među vrijednostima su uobičajeni ili nagnuti font i kurziv. Varijanta fonta sloga odgovorna je za mala velika slova. Za zasićenje, koristite font-weight, itd. Veličina fonta i boja mogu se dodijeliti.

Nestandardno rješenje

Osim standardnih fontova, mogu se koristiti i nestandardna rješenja. Oni su obično jedinstveniji i, najvjerojatnije, nećete ih primijetiti na stranicama konkurenata. Da biste to učinili, ne morate koristiti slike, javascript i flash. Dovoljno je uzeti pravilo @ font-face. Omogućuje korisniku preuzimanje vanjske datoteke u dokument. Ova metoda vam omogućuje da priložite font CSS OTF i TTF. To su posebni formati koji dobro funkcioniraju za slične zadatke. Problemi se mogu pojaviti samo s preglednikom Internet Explorer. Unatoč činjenici da je prvi put počeo koristiti fontove treće strane još 1997. godine, sada postavlja oštre zahtjeve. On čini mnogo da pokvari vaš rad. Često može komprimirati datoteku s fontom, ponekad je može šifrirati. Zato postoje sve vrste kaki.

Formati

Trenutno postoji nekoliko formata fontova koje trebate znati. Inače ćete naići na niz nedosljednosti i nekompatibilnosti. Možete povezati font CSS TTF. Ovaj format sada podržavaju svi preglednici. Iznimka mogu biti Internet Explorer 8 i niže, kao i Opera Mini 5.0-8.0.
S EOT možeraditi samo IE Situacija s WOFF-om je ista kao i kod TTF-a. Ali SVG djeluje u preglednicima Chrome do verzije 37, kao i Safari, iOS Safari, Mozilla. Kao što praksa pokazuje, najbolje je koristiti TTF. Ovo je najsvestranija opcija koja rijetko uzrokuje probleme. To je najčešće.

Pravilo

Dakle, za povezivanje fonta jednog od gore navedenih formata, dovoljno je koristiti pravilo @ font-face o kojem smo ranije razgovarali. Da budemo jasni, morate proći određeni algoritam. Imate datoteku font.ttf. Da biste ga koristili za glavni tekst, najprije morate kopirati datoteku u mapu u kojoj se nalaze sve datoteke na web-mjestu. Ako želite koristiti više od jednog fonta, ovdje možete stvoriti posebnu mapu za preuzimanje. Bit će vam mnogo lakše pronaći ih i promijeniti sadržaj takve mape. Sada morate biti sigurni da je sam preglednik preuzeo naš font. Da biste to učinili, dajte mu naznaku. Koristimo direktivu @ font-face. Naredba će izgledati ovako: @ font-face {font-family: MyUniqueFont; src: url ('fonts /font.ttf'); } Komanda font-family odgovorna je za davanje fonta njegovom imenu i nakon što se može koristiti u style sheet-u. Drugi red sadrži naznaku puta u kojem preglednik treba pronaći stil i spojiti ga. Ovo nije univerzalna adresa. Ovisno o tome gdje ste stavili datoteku u fontu, ova će putanja također biti različita. Na taj ćete način naučiti kako povezati CSS font iz mape.

Veza

Ako ne znate kako povezati više CSS fontova, tu je i priručnik na ovom računu. Ona jeomogućuje vam da odredite više datoteka odjednom. Na primjer, mogu biti povezani s desetak. Da biste to učinili morate koristiti gore navedeno pravilo @ font-face. Kao primjer kako ste prethodno povezali datoteku iz mape, kao i novi redak, navedite vezu s drugim postavkama fonta. Ako imate web-lokaciju izgrađenu na WordPress-u, povezivanje stilova je još lakše. Kada trebate zamijeniti font zaglavlja, samo idite na admin panel. Tamo ćete naći "Opcije teme". U odjeljku "Tiskara" bit će čitav popis različitih varijanti. Potrebno je samo odabrati i spremiti promjene.

Ostale opcije

Fontovi fonta često koriste fontove za fontove. Ovo je popularan alat za odabir i povezivanje stilova. Postoji veliki broj skupova fontova. Da biste ih povezali, jednostavno idite na službenu stranicu. Popis s primjerima i mogućnost eksperimenta pojavit će se pred vama. Nakon što dodate željeni stil, ne zaboravite odabrati ćirilicu ako je vaš izvor na ruskom jeziku. Tada možete odmah odabrati veličinu, crtež ili odabrati nekoliko opcija za sve prilike.
Nakon toga, imat ćete gotov kod koji želite instalirati CSS datoteku. U ovom slučaju, pravilo dodavanja metoda također radi. Na primjer, ako je stilska tablica zasebni dokument, naredbu šaljemo u prvi redak. Ako se stilska tablica nalazi izravno u HTML datoteci, tada je morate dodati tijelu oznake.

Zaključci

Dodajte nove fontove na svoju web-lokacijulako je. Važno je odmah odrediti metode i opcije. Ovisno o sustavu na kojem se web-lokacija nalazi, morate razmisliti o tim koracima. Ako imate pisani izvor, u ovom slučaju postoji nekoliko mogućnosti. Ako, na primjer, WordPress, onda je ova operacija mnogo lakša nego što se čini.

Povezane publikacije