Od autora: Dobrodošli na stranice Webformyself bloga. U ovom članku bih želio odgovoriti na pitanje kako postaviti font u html-u. Neki ljudi to još uvijek rade na pogrešan način, pa je važno detaljnije ispitati problem.
Kako je font postavljen ranije
Ranije je html koristio posebnu uparenu oznaku fonta, koja je služila kao kontejner za promjenu parametara fonta, kao što su font, boja i veličina. Danas je ovaj pristup u osnovi pogrešan. Zašto? Web standardi određuju da izgled stranice ne treba specificirati u html oznaci. Osim toga, oznaka je u potpunosti podržana samo u vrlo staroj verziji HTML-a - HTML 3.
Ispravno postavljanje fonta u html-u
Danas se u tu svrhu isplati koristiti isključivo CSS mogućnosti. Ovaj jezik je stvoren upravo da bi se kroz njega odredio izgled. Osim toga, CSS ima mnogo više svojstava koja utiču na izgled teksta. Pogledajmo malo svaki od njih:
U stilu fonta. Definira stil teksta. Uzima sljedeće vrijednosti:
Varijanta fonta. Svojstvo specificira kako treba tumačiti pravopis malih slova. Ima samo dva značenja:
Normalno – normalno ponašanje.
Mala slova - sva mala slova se pretvaraju u velika slova, a njihova veličina je neznatno smanjena u odnosu na običan font.
Font-weight. Određuje podebljanost teksta. Vrijednost se može odrediti pomoću ključnih riječi ili numeričke vrijednosti. Pogledajmo sve opcije:
Normalan – normalan tekst
Bold – tekst podebljanog stila
Podebljano – pojavit će se podebljano od nadređenog elementa.
Lakše – slova će imati manje smelosti u poređenju sa njihovim roditeljem.
To je tako jednostavno. Osim toga, moguće je podesiti vrijednost u obliku brojeva od 100 do 900, gdje je 900 najpodeblje. Na primjer, normalna vrijednost odgovara 400, a podebljana vrijednost odgovara 700.
Nažalost, većina pretraživača ne prepoznaje ove numeričke vrijednosti i mogu koristiti samo dvije vrijednosti: normalnu i bold. Za eksperiment sam napravio 9 pasusa i svakom dao različitu težinu teksta - od 100 do 900. Zatim sam otvorio ovu web stranicu u različitim pretraživačima i nijedan od njih nije prikazao različite stilove. Zaključak: bolje je ne koristiti numeričke vrijednosti.
Veličina slova. Ovo svojstvo specificira veličinu slova. Veličina se može specificirati u različitim relativnim i apsolutnim vrijednostima. Najčešće je veličina navedena u pikselima, relativnim em jedinicama i procentima. Ako želite saznati više o postavljanju veličine u CSS-u, pročitajte ovaj, gdje je sve detaljnije opisano.
Font-familija. Možda najosnovnije svojstvo koje određuje porodicu ili specifično ime fonta koji se koristi. Ako koristite određeno ime, morate biti sigurni da se navedeni font može pronaći na računarima svih korisnika. Za pouzdanost, morate navesti alternativnu opciju ili cijelu porodicu odvojenu zarezima. Fontovi su podijeljeni u sljedeće porodice:
Svaka porodica odgovara različitim potrebama. Na primjer, fantazija se često koristi za dizajniranje različitih zaglavlja, a monospace se koristi za izlaz strojnog koda, itd. Konkretnije nazive fontova možete saznati, na primjer, u uređivaču teksta ili u Photoshopu.
Stenografija
Sve o čemu smo gore govorili može se vrlo lako zapisati u suštini u jednom redu koristeći predivno svojstvo fonta, koje objedinjuje sve postavke. Potrebno je da pišete sledećim redosledom:
Font: font-style | font-varijanta | font-weight | veličina fonta | font-family;
Font: font-style | font - varijanta | font - težina | veličina fonta | font - porodica ; |
Ako ne morate specificirati parametar, on se jednostavno izostavlja. Ovdje su potrebne samo veličina i porodica fontova; sve ostalo je opciono ako nije potrebno. Korištenje stenografskih zapisa omogućava vam da uvelike smanjite kod u css-u. Koristite ga jer je dobra optimizacija za sajt.
Kako postaviti font u html-u na različite elemente
Stoga smo se iz nekog razloga jako zanijeli opisivanjem svih svojstava fonta. Ovo je veoma važna informacija, ali kako da je ispravno pitate? Koristite prave birače da biste došli do pravih elemenata. U nastavku nudim nekoliko primjera:
p a( porodica fontova: Verdana, sans-serif; )
Za tabelarne podatke postavljeni su mnogi parametri fonta: redukovana velika slova, podebljani stil, veličina fonta i naziv.
Jeste li naišli na hirovite kupce koji zahtijevaju "oslikane" fontove? Ili jednostavno kreirate modernu tematsku web stranicu, a prilagođeno pisanje teksta će istaknuti ideju vašeg autora? Razmotrimo jedan od načina rješavanja ovog problema.
Kada je potrebno
Prvo, pogledajmo najopravdanije slučajeve u kojima će vam možda trebati nestandardni fontovi.
- Moderan meni.
- Elegantna zaglavlja.
- Logo. Stvaranje logotipa je ozbiljna stvar, napisane su mnoge knjige o ovoj temi, stručnjaci se već dugo bave ovom materijom... I autor neće ljudima oduzeti kruh, već će uložiti svoja dva centa. Ako je vaš logo tekst, onda za kvalitetnu SEO optimizaciju treba ga prikazati kao TEKST.
Zadatak je korištenje nestandardnih fontova, odnosno onih koji sa značajnim stepenom vjerovatnoće nisu dostupni korisniku vašeg internetskog resursa.
Rješenja
Kao iu većini slučajeva, svaki zadatak ima nekoliko rješenja, a ni naše nije iznimka. idi:
- Slika. Ne postoji fleksibilnost konfiguracije, brzina učitavanja stranica se pogoršava, opterećenje servera se povećava, SEO potpuno ne dolazi u obzir.
- Flash. Dodatne datoteke za preuzimanje, potrebne su vam vještine u Flash uređivačima (ovdje možete promijeniti i tekstualne parametre), prosječan SEO.
- JS. Dodatni eksterni fajlovi (i sve što dolazi uz njega), prosečan SEO, tekst se ne mogu kopirati.
- Prilagođeni fontovi koristeći CSS
Pravi put samuraja, ili "živeo CSS"
U rješavanju ovog problema pomoći će nam css pravilo @font-face, koje nam omogućava da učitamo određene fontove u dokument i definiramo njihova podešavanja.
@ font-face (familija fontova: AlexBrush- Regular; src: local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf " ) ;)
Na taj način eliminiramo potrebu da font koji smo odabrali bude prisutan u OS posjetitelja.
Ovaj tip dizajna vam omogućava da povežete TrueType (ttf) i OpenType (otf) fontove.
Zanimljivo: OpenType ima veće mogućnosti pripreme za štampu nego TrueType i podržava veći skup znakova u manjoj veličini datoteke.
Čini se da bi se ova tema mogla zatvoriti, ali postoji jedno ALI... Prisjetimo se naših “posebnih” prijatelja, odnosno pretraživača iz IE porodice. Da biste implementirali prilagođeni font u IE, font mora biti u Embedded OpenType (eot) formatu.
Ovo nije jedini slučaj u kojem IE funkcija donosi više koristi nego štete. Činjenica je da eot format podrazumijeva:
- Enkripcija. Podaci o adresi projekta se unose u fajl, tako da napadači neće moći ukrasti font i postaviti ga na svoju web stranicu.
- Kompresija. Datoteka fonta je komprimirana, čime se smanjuje vrijeme preuzimanja.
Uzimajući u obzir gore navedeno, modificirajmo naš primjer:
@ font-face (familija fontova: AlexBrush- Regular; src: local("AlexBrush-Regular ") , url(./ AlexBrush- Regular. eot) ;) @ font-face (familija fontova: AlexBrush- Regular; src : local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ;)
Praktično iskustvo je pokazalo potrebu za poboljšanjem ovog primjera kako bi se ispravile greške i poboljšalo prepoznavanje od strane pretraživača.
@font-face ( font-family: "AlexBrush-Regular" ; src: url("AlexBrush-Regular.eot" ) ; src: url( "AlexBrush-Regular.eot?#iefix") format("embedded-opentype") , url( "AlexBrush-Regular.svg#JournalRegular") format("svg") ; url("AlexBrush-Regular.woff" ) format("woff" ) , url("AlexBrush-Regular.otf " ) format("truetype" ) , )
Bitan!!!
- Fleksibilnost. Postavljanje i promjena postavki teksta je jednostavno.
- Brzina. Minimalni broj dodatnih datoteka za učitavanje ne usporava stranicu kao isti broj elemenata u js-u i Flash-u.
- SEO. Tekst ostaje tekst - prednosti su očigledne.
- Primjer radi u pretraživačima počevši od: IE4, Op, Fx3.5, Cr2, Sa1.
- Prije korištenja fonta, potrebno ga je optimizirati (pročitajte poslijegovor).
- Kada koristite kupljene fontove, morate brinuti o njihovoj sigurnosti.
- Ako je propusni opseg komunikacijskog kanala mali, dok se datoteka fonta ne učita, korisnik će ili vidjeti jednostavan font umjesto nestandardnog, ili neće vidjeti ništa.
Pogovor.
Optimizacija fonta
Prilikom kreiranja skupa znakova, programeri ga pokušavaju upakirati s maksimalnom funkcionalnošću kako bi dosegnuli ciljnu publiku što je šire moguće. Na osnovu toga unose slova, brojeve, interpunkcijske znakove, dodatne ikone, različite tipove stilova, čitav niz vrijednosti veličine fonta, itd.
Kao rezultat takvih napora, datoteke fontova mogu premašiti oznaku desetina MB. Treba li nam takva raznolikost? Uostalom, da bismo dali pikantan stilski štih, nama (u zavisnosti od situacije) nisu nužno potrebni znaci interpunkcije ili razni simboli. Istina, različiti stilovi nisu uvijek potrebni. Ili recimo da optimizirate svoju web stranicu isključivo za RuNet, možete i bez latinice...
Pa, već ste shvatili suštinu. Font treba optimizirati:
- Uklanjamo sav sadržaj koji nije koristan u rješavanju praktičnog problema.
- Konvertujemo fajlove u potrebne formate.
Kako uraditi? Na Internetu postoji niz usluga koje vam omogućavaju da izvršite potrebne operacije, na primjer: font-face Generator, Online Font Converter, Web Font Optimizer, itd.
Zaštita
Za razvoj kvalitetnog funkcionalnog fonta potrebno je puno vremena, pa stoga takav font košta dobar iznos novca. Svi kupljeni (legalno) fontovi su registrovani i predstavljaju intelektualno vlasništvo.
Kada kupite font, dobijate pravo da ga koristite na webu, ali ako napadač preuzme font sa vašeg resursa, tada će vlasnik stranice snositi odgovornost za štetu nanesenu programeru. Kako zaštititi svoj font?
U IE-u je sve osmišljeno za nas - zaštita u eot formatu je već ugrađena. Za sve ostale pretraživače još nema jasnog rješenja.
Postoje, naravno, novi razvoji - na primjer, WOFT format, u kojem je pitanje zaštite otklonjeno slično kao eot, ali nažalost, još uvijek se ne može pohvaliti punom podrškom u pretraživačima.
Također možete jednostavno primijeniti besplatne fontove.
Da biste stvorili jedinstven i šareni dizajn, morate dodati vlastite fontove. U ovoj lekciji ćemo naučiti kako povezati bilo koji font. Povezivanje novog fonta se vrši pomoću pravila @font-face. U ovom pravilu, kao što ste vjerovatno pogodili, moraju postojati dva svojstva: naziv fonta i putanja do datoteke (do fonta). Sljedeći primjeri će se odnositi na font Open Sans. Pogledajmo prvi primjer.
@font-face (
font-family: "Open Sans";
src: local("Open Sans"),
url("/font/open_sans.ttf") format("truetype");
}
Koristimo svojstvo font-family da specificiramo ime fonta (od sada ćemo ga koristiti ovako: p (font-family: "Open Sans" sans-serif)). Lokalni ("Open Sans") dio koda znači provjeru da li korisnik ima taj font. Ako ne želite provjeriti da li korisnik ima font, možete pisati kao u drugom primjeru.
@font-face (
font-family: "Open Sans";
src: url("/font/open_sans.ttf") format("truetype");
}
Treći primjer je potpuniji i kompatibilniji sa više pretraživača.
@font-face (
font-family: "Open Sans";
src: url("open_sans.eot");
src: url("open_sans.ttf") format("truetype"),
url("open_sans.woff") format("woff");
font-weight: normalan;
font-style: normalan;
}
Drugi načini povezivanja fontova
Prvi metod (na primjer, uzimamo font sa Google web stranice), kod se ubacuje
.Dodavanje novog fonta na web stranicu nije najlakši zadatak. Gdje odabrati, preuzeti i kako dodati font na web stranicu u CSS-u? U ovom članku ćemo pokazati jedan od najpovoljnije načini za instaliranje i povezivanje fonta sa web lokacijom.
Kako uključiti font na web stranicu u CSS
Na primjer, imamo font Raleway.ttf i želimo ga koristiti u svim zaglavljima ( h1) naše web stranice. Da biste to učinili, izvršite sljedeće korake:
h1 ( porodica fontova: "Raleway Regular"; }
Sada su svi naslovi 1. nivoa na sajtu prikazani u fontu koji nam je potreban.
Ako želite povezati nekoliko fontova (ili njihovih stilova), jednostavno ih dodajte ispod prethodnog:
@font-face { porodica fontova: "Raleway Regular"; src: url("../fonts/RalewayRegular.ttf" ) format ( "istiniti tip"); font-style : normalan; font-weight: normalan; } @font-face{ porodica fontova: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) format ( "istiniti tip"); font-style : normalan; font-weight: normalan; }
Možda ste primijetili da postoje različiti formati fontova - .ttf, .woff, .eot, .svg itd. Postoji i format za moderne pretraživače. woff2, ali o tome ćemo govoriti u jednom od sljedećih članaka. Obično je svaki font uključen u 3 formata odjednom. Ovo se radi kako bi se font ispravno prikazao u svim pretraživačima, uključujući. i stare. izgleda ovako:
@font-face { porodica fontova: "Raleway Regular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"), url( "../fonts/RalewayRegular/RalewayRegular.woff") format ( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") format ( "istiniti tip"); font-style : normalan; font-weight: normalan; }
Evo slijedi Obratite pažnju na redosled povezivanja - ovo je važno!
Nećemo ulaziti u detalje, samo zapamtite izgled ovog dizajna.
Ako imate font u samo jednom formatu, onda koristite različite pretvarače fontova. Evo jednog od njih.
Kako povezati font koristeći razne usluge
Također možete koristiti uslugu fonts4web za povezivanje fontova: 
Najlakši način za povezivanje fontova
Kako povezati font sa Moguta CMS šablonom 
Kako dodati vezu sa Google fontovima u Moguta CMS predložak
Sada znate kako dodati font na web stranicu koristeći CSS i više. Rado ćemo odgovoriti na sva vaša pitanja Neki dan sam ponovo odlučio da počnem da radim sklekove. Jedan učitelj kojeg poštujem tvrdi da ova vježba ima gotovo magičan učinak ako se radi pravilno.
Pa, postavio sam eksperiment na sebi, i da bi bilo teže skočiti, odlučio sam da „laboratorijsko svesku“ učinim javnom i postavio sam ga na napušteni blog.
Stari dizajn nije odgovarao novoj ideji, i bez oklijevanja sam uzeo onaj koji mi se manje-više dopao iz opšteg WordPress repozitorija.
Znate li u čemu je problem sa nekim gotovim šablonima preuzetim odatle? Problem je nespretna kompatibilnost sa ćiriličnim fontovima. U mom slučaju, zaglavlja su stradala. Pošto font na koji upućuje CSS nije sadržavao ruske znakove, oni su uzeti iz zadanog fonta (Sans ili Arial). Kao rezultat toga, naslovi su bili OGROMNI i uništili cijeli izgled. Morao sam razmisliti kako zamijeniti font.
Postoji nekoliko načina da to učinite.
Metod 1: Glupo
Sve se svodi na to da na internetu pronađete odgovarajući font, instalirate ga na računar, napišete u CSS-u i vidite svoju stranicu kako je predviđeno.
Drugi ga i dalje vide, u najboljem slučaju, sa podrazumevanim fontovima, au najgorem slučaju, čak i van štampe.
Ne radi to!
Metoda 2: Pretvorite dizajn u standardni font
Ovo je najidealnija opcija, ali, nažalost, nije uvijek prikladan, jer se ponekad zbog toga gubi "zest" dizajna. Međutim, UVIJEK razmotrite ovaj pristup, jer koliko god se trudili, moguće je da će klijentski računar i dalje koristiti font koji je dostupan.
Sigurni fontovi koji su dostupni na gotovo svim operativnim sistemima su: Verdana (idealno za tekstove),Uticaj (ponekad vrlo dobro u naslovima), Arial, Arial Black, Comic Sans MS (kaka, koja je veoma popularna među početnicima), Kurir Novo (pogodno za primjere koda i obrasce), Georgia, Times New Roman, Trebuchet MS.
Metoda 3: Slika umjesto teksta
Opcija je vrlo unakrsna i pogodna za dizajniranje statičkih elemenata. Na primjer, zaglavlja stranice. Napravite prozirni PNG sa tekstom u željenom fontu, obradite ga po potrebi i ubacite na sajt, ne zaboravljajući da popunite ALT. Ili ista stvar, ali zalijepite tekst na neku pozadinu i sačuvajte ga kao JPG.
Osim zaglavlja, morao sam promijeniti izgled zaglavlja i widgeta postova. Pa, zašto ne napraviti posebnu sliku sa naslovom za svaki unos?
Iako postoje majstori koji generiraju slike s naslovnim tekstom koristeći serverske skripte, to je već perverzija.
Metoda 4: Cufon
Ovi apleti se mogu generirati iz datoteke fonta koristeći online generator http://cufon.shoqolate.com/generate/
Najlakši način je korištenje http://www.google.com/fonts Od prikazanih odaberete željeni font i dobijete gotov kod koji trebate ubaciti u stranicu (u glavu i u stilski fajl), nakon čega sve radi.
Ali nisam želio da koristim dodatni javascript, da se mučim sa generisanjem apleta itd. Hteo sam sve da uradim brzo i jednostavno. Štaviše, fajl sa potrebnim fontom je već dugo bio dostupan.
Metoda 4: Povežite font sa sajtom koristeći CSS
Internet je pun vodiča na ovu temu. Međutim, nakon što sam ih probao pet, došao sam do katastrofalnog rezultata. Moj TTF font je normalno prikazan samo u IE. U drugim pretraživačima je nemilosrdno zamijenjen Arialom.
Priznajem da nisam obožavatelj IE i da ga smatram pretraživačem za preuzimanje. Dosta! Dakle, morao sam napraviti mali napredak.
Da povežemo font sa sajtom koristeći CSS, potreban nam je sam font (fajl) i onlajn konverter http://onlinefontconverter.com/
Može postojati veliki izbor online pretvarača fontova. Neki su zatvoreni, na njihovom mjestu se pojavljuju novi, pa ako ovog više nema, potražite u tražilicama upit poput "online font converter" i pokušajte tamo konvertirati fontove. U ovom postu navedeni pretvarači su korišteni kao primjer.
1. Idite na web stranicu pretvarača , zgrabite font koji imate i prevucite ga u ovaj prozor (obično se nalazi u desnoj koloni).
2. Preuzmite font u 4 varijante: EOT, OTF, TTF i WOFF. Ovo bi trebalo biti dovoljno. Pregledač će u procesu prikazivanja stranice izabrati i preuzeti onu koja mu je pogodnija.
3. Otpremite fontove na web stranicu. Napravio sam folder za ovo u korijenu stranice "f" i stavio ih tamo.
Ažuriranje 16.02.2015. Za sada onlinefontconverter.com prepravljen i nije konvertovao nijedan od predloženih fontova ((
Morao sam koristiti stranicu font2web.com. Ovaj pruža sve potrebne fontove odjednom u paketu u jednoj arhivi. Udobno!
4. Povežite učitavanje fonta na stranicu. Da biste to učinili, unesite ovaj kod u css datoteku ili u odgovarajuće oznake stila.
@font-face( font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. wow);)
font-family: EtoMoiFont;— govori pretraživaču kako će se zvati učitani font. Sam smisli ime.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— specificira putanju i nazive datoteka fontova.
Zašto su fontovi ovim redoslijedom?
Prvi stavljam EOT. Ovaj format koriste starije verzije IE-a.
Sekunda — OTF. Ovo je komprimirani format fonta koji bi trebao imati manju težinu.
Treće — TTF. Gotovo svi pretraživači to razumiju. Mada, dešava se drugačije. Na primjer, na iOS-u se možda neće otvoriti.
Last — WOFF. Ovo bi trebalo dobro da se čita na Mac računarima, ali još nisam imao vremena da to proverim.
5. Označite u datoteci stila , koju familiju fontova treba koristiti za prikaz naslova (u našem slučaju, naslova h2).
h2(familija fontova: EtoMoiFont;)
Spremni!
Ako fontovi nisu primijenjeni, uvjerite se: prvo, da web lokacija koristi css datoteku (ponekad trebate resetirati keš, ponekad potražite drugu css datoteku), drugo, da se font koristi za klasu (id ili tag) koje ste naveli nisu blokirani u drugoj css datoteci koja se učitava nakon ovoga.
Ljepota ove metode je u tome što u budućnosti mogu postaviti ovaj font za bilo koji tekstualni kontejner.
Evo šta se desilo.
Nedostatak metode je što postavke pretraživača nekih paranoičnih korisnika mogu zabraniti učitavanje vanjskih fontova, flash-a, javascripta, slika itd.
Zato ne budite lijeni i provjerite kako će vaša stranica izgledati ako su učitani fontovi onemogućeni. Pokušajte igrati sa sigurnim metod 2, a zatim ponovo učitajte svoj. Ako su veličine manje-više iste i ništa se nije pomaknulo, onda je to u redu.
I dalje! Testirajte metode samo na računarima na kojima nije instaliran font sa kojim ćete raditi. Inače će uspjeti metoda broj 1.
To je sve. Bio sam sa tobom.
Do sljedećeg puta.
