Od autora: Dobrodošli na stranice bloga Webformyself. U ovom članku želio bih odgovoriti na pitanje kako postaviti font u html. Neki ljudi to još uvijek rade na pogrešan način, stoga je važno temeljitije proučiti problem.
Kako je font postavljen prije
Prethodno je html koristio posebnu uparenu oznaku fonta, koja je djelovala kao spremnik za promjenu parametara fonta, kao što su tip slova, boja i veličina. Danas je ovaj pristup u osnovi pogrešan. Zašto? Web standardi određuju da izgled stranice ne bi trebao biti naveden u HTML oznakama. Osim toga, oznaka je u potpunosti podržana samo u vrlo staroj verziji HTML-a - HTML 3.
Ispravno postavljanje fonta u html
Danas se u tu svrhu isplati koristiti isključivo CSS mogućnosti. Taj je jezik stvoren upravo zato da bi se preko njega odredio izgled. Osim toga, CSS ima mnogo više svojstava koja utječu na izgled teksta. Pogledajmo malo svaki od njih:
Stil fonta. Definira stil teksta. Zauzima sljedeće vrijednosti:
Font-varijanta. Svojstvo određuje kako treba tumačiti pisanje malih slova. Ima samo dva značenja:
Normalno – normalno ponašanje.
Mala slova - sva mala slova su pretvorena u velika slova, a njihova veličina je malo smanjena u odnosu na obični font.
Težina fonta. Određuje podebljanost teksta. Vrijednost se može odrediti ključnim riječima ili numeričkom vrijednošću. Pogledajmo sve opcije:
Normalno – normalan tekst
Podebljano – podebljani tekst
Podebljano – izgledat će podebljano od nadređenog elementa.
Svjetlija – slova će biti manje podebljana u usporedbi s roditeljem.
Tako je jednostavno. Osim toga, moguće je postaviti vrijednost u obliku brojeva od 100 do 900, gdje je 900 najhrabriji. Na primjer, normalna vrijednost odgovara 400, a podebljana vrijednost odgovara 700.
Nažalost, većina preglednika ne prepoznaje ove numeričke vrijednosti i mogu koristiti samo dvije vrijednosti: normalno i podebljano. Za eksperiment sam izradio 9 odlomaka i svakom dao različitu težinu teksta - od 100 do 900. Zatim sam otvorio ovu web stranicu u različitim preglednicima i nijedan od njih nije prikazao različite stilove. Zaključak: bolje je ne koristiti numeričke vrijednosti.
Veličina fonta. Ovo svojstvo određuje veličinu slova. Veličina se može odrediti u različitim relativnim i apsolutnim vrijednostima. Najčešće se veličina navodi u pikselima, relativnim em jedinicama i postocima. Ako želite saznati više o postavljanju veličine u CSS-u, pročitajte ovaj, gdje je sve detaljnije opisano.
Obitelj fontova. Možda najosnovnije svojstvo koje određuje obitelj ili specifično ime korištenog fonta. Ako koristite određeno ime, morate biti sigurni da se navedeni font može pronaći na svim korisničkim računalima. Za pouzdanost morate navesti alternativnu opciju ili cijelu obitelj odvojenu zarezima. Fontovi su podijeljeni u sljedeće obitelji:
Svaka obitelj zadovoljava različite potrebe. Na primjer, fantasy se često koristi za dizajniranje raznih zaglavlja, a monospace se koristi za ispis strojnog koda, itd. Konkretnije nazive fontova možete saznati, na primjer, u uređivaču teksta ili u Photoshopu.
Stenografski zapis
Sve što smo gore spomenuli može se vrlo jednostavno zapisati u jednom retku pomoću prekrasnog svojstva fonta, koje objedinjuje sve postavke. Morate ga napisati sljedećim redoslijedom:
Font: font-style | varijanta fonta | težina-fonta | veličina fonta | obitelj-fontova;
Font: font-style | font - varijanta | težina fonta | veličina fonta | obitelj - fontova ; |
Ako ne trebate navesti parametar, on se jednostavno izostavlja. Ovdje su potrebni samo veličina i obitelj fonta; sve ostalo je izborno ako nije potrebno. Korištenje stenografskog zapisa omogućuje vam znatno smanjenje koda u css-u. Koristite ga jer je dobra optimizacija za stranicu.
Kako postaviti font u html različitim elementima
Stoga smo se iz nekog razloga jako zanijeli opisom svih svojstava fonta. Ovo je vrlo važna informacija, ali kako je ispravno pitati? Koristite prave selektore da dođete do pravih elemenata. U nastavku nudim nekoliko primjera:
p a (obitelj-fontova: Verdana, sans-serif; )
Za tablične podatke postavljeni su mnogi parametri fonta: smanjena velika slova, podebljani stil, veličina fonta i naziv.
Jeste li naišli na hirovitog kupca koji zahtijeva "oslikane" fontove? Ili jednostavno stvarate elegantnu 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 su vam možda potrebni nestandardni fontovi.
- Elegantan jelovnik.
- Elegantna zaglavlja.
- Logo. Stvaranje logotipa je ozbiljna stvar, mnoge su knjige napisane na ovu temu, stručnjaci već dugo proučavaju ovu temu ... A autor neće ljudima oduzeti kruh, ali će uložiti svoja dva centa. Ako je vaš logo tekst, onda bi za kvalitetnu SEO optimizaciju trebao biti prikazan kao TEKST.
Zadatak je koristiti nestandardne fontove, odnosno one koji, uz značajan stupanj vjerojatnosti, nisu dostupni korisniku vašeg internetskog resursa.
Rješenja
Kao iu većini slučajeva, svaki zadatak ima nekoliko rješenja, a ni naš nije iznimka. Ići:
- Slika. Nema fleksibilnosti konfiguracije, brzina učitavanja stranica opada, opterećenje poslužitelja raste, SEO uopće ne dolazi u obzir.
- Bljesak. Dodatne datoteke za preuzimanje, potrebne su vam vještine u Flash uređivačima (ovdje također možete promijeniti parametre teksta), prosječan SEO.
- JS. Dodatne vanjske datoteke (i sve što ide uz to), prosječan SEO, tekst se ne može kopirati.
- Prilagođeni fontovi pomoću CSS-a
Pravi put samuraja ili "živio CSS"
U rješavanju ovog problema pomoći će nam css pravilo @font-face koje nam omogućuje učitavanje određenih fontova u dokument i definiranje njihovih postavki.
@ font- face (font-familija: AlexBrush- Regular; src: local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf " ) ;)
Time eliminiramo potrebu da font koji smo odabrali bude prisutan u OS-u posjetitelja.
Ova vrsta dizajna omogućuje vam povezivanje TrueType (ttf) i OpenType (otf) fontova.
Zanimljiv: OpenType ima veće mogućnosti pripreme za tisak od TrueTypea 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... Sjetimo se naših "posebnih" prijatelja, naime preglednika iz obitelji IE. Za implementaciju prilagođenog fonta u IE, font mora biti u Embedded OpenType (eot) formatu.
Ovo nije jedini slučaj u kojem značajka IE čini više koristi nego štete. Činjenica je da eot format podrazumijeva:
- Šifriranje. U datoteku se unose podaci o adresi projekta, 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 (font-familija: AlexBrush- Regular; src: local("AlexBrush-Regular ") , url(./ AlexBrush- Regular. eot) ;) @ font- face (font-familija: AlexBrush- Regular; src : lokalno("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ;)
Praktično iskustvo pokazalo je potrebu poboljšanja ovog primjera kako bi se popravile pogreške i poboljšalo prepoznavanje od strane preglednika.
@font-face (familija fontova: "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") , )
Važno!!!
- Fleksibilnost. Postavljanje i mijenjanje postavki teksta jednostavno je.
- Ubrzati. Minimalni broj dodatnih datoteka za učitavanje ne usporava stranicu kao isti broj elemenata u js-u i Flashu.
- SEO. Tekst ostaje tekst – prednosti su očite.
- Primjer radi u preglednicima počevši od: IE4, Op, Fx3.5, Cr2, Sa1.
- Prije korištenja fonta potrebno ga je optimizirati (pročitajte pogovor).
- Kada koristite kupljene fontove, morate se brinuti o njihovoj sigurnosti.
- Ako je propusnost komunikacijskog kanala mala, tada dok se datoteka fonta ne učita, korisnik će ili vidjeti jednostavan font umjesto nestandardnog ili neće vidjeti uopće ništa.
Pogovor.
Optimizacija fonta
Prilikom izrade skupa znakova, programeri ga pokušavaju spakirati s maksimalnom funkcionalnošću kako bi dosegli što širu ciljnu publiku. Na temelju toga unose slova, brojke, interpunkcijske znakove, dodatne ikone, različite vrste stilova, cijeli niz vrijednosti težine fonta itd.
Kao rezultat takvih napora, datoteke fontova mogu premašiti oznaku desetaka MB. Treba li nam takva raznolikost? Uostalom, da bismo dali pikantni stilski štih, nisu nam (ovisno o situaciji) nužno potrebni interpunkcijski znakovi 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 bit. Font je potrebno optimizirati:
- Uklanjamo sav sadržaj koji nije koristan u rješavanju praktičnog problema.
- Datoteke pretvaramo u tražene formate.
Kako to učiniti? Na internetu postoji niz usluga koje vam omogućuju izvođenje potrebnih operacija, na primjer: Generator fontova, Online Font Converter, Web Font Optimizer itd.
Zaštita
Za razvoj visokokvalitetnog funkcionalnog fonta potrebno je dosta vremena, stoga takav font košta dobar iznos novca. Svi (legalno) kupljeni fontovi registrirani su i predstavljaju intelektualno vlasništvo.
Kada kupite font, dobivate ga pravo koristiti na webu, ali ako je font s vašeg resursa preuzeo napadač, tada će vlasnik stranice snositi odgovornost za štetu nanesenu programeru. Kako zaštititi svoj font?
U IE je sve zamišljeno za nas - zaštita u eot formatu je već ugrađena. Za sve ostale preglednike još nema jasnog rješenja.
Postoje, naravno, novi razvoji - na primjer, WOFT format, u kojem je pitanje zaštite uklonjeno slično kao i eot, ali nažalost, još se ne može pohvaliti potpunom podrškom u preglednicima.
Također možete jednostavno primijeniti besplatne fontove.
Da biste stvorili jedinstveni i šareni dizajn, morate dodati vlastite fontove. U ovoj lekciji ćemo naučiti kako spojiti bilo koji font. Povezivanje novog fonta vrši se pomoću pravila @font-face. U ovom pravilu, kao što ste vjerojatno pogodili, moraju postojati dva svojstva: naziv fonta i put do datoteke (do fonta). Sljedeći primjeri odnosit će se na font Open Sans. Pogledajmo prvi primjer.
@font-face (
obitelj-fontova: "Open Sans";
src: lokalno ("Otvoreno bez"),
url("/font/open_sans.ttf") format("truetype");
}
Svojstvo font-family koristimo za određivanje naziva 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 ima li korisnik font, možete napisati kao u drugom primjeru.
@font-face (
obitelj-fontova: "Open Sans";
src: url("/font/open_sans.ttf") format("truetype");
}
Treći primjer je potpuniji i kompatibilniji s više preglednika.
@font-face (
obitelj-fontova: "Open Sans";
src: url("open_sans.eot");
src: url("open_sans.ttf") format("truetype"),
url("open_sans.woff") format("woff");
težina fonta: normalna;
stil fonta: normalan;
}
Drugi načini povezivanja fontova
Prva metoda (na primjer, uzimamo font s Google web stranice), u koji se umeće kod
.Dodavanje novog fonta na web mjesto nije najlakši zadatak. Gdje odabrati, preuzeti i kako dodati font web stranici u CSS-u? U ovom ćemo članku prikazati jedan od najprikladniji načine instaliranja i povezivanja fonta sa web mjestom.
Kako uključiti font na web stranicu u CSS-u
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 ( obitelj-fontova: "RalewayRegular"; }
Sada su svi naslovi 1. razine na stranici prikazani u fontu koji nam je potreban.
Ako želite povezati nekoliko fontova (ili njihovih stilova), jednostavno ih dodajte ispod prethodnog:
@font-face { obitelj-fontova: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf") format( "truetype"); stil fonta : normalan; težina fonta: normalna; } @font-face{ obitelj-fontova: "RalewayBold"; src: url("../fonts/RalewayBold.ttf") format( "truetype"); stil fonta : normalan; težina fonta: normalna; }
Možda ste primijetili da postoje različiti formati fontova - .ttf, .woff, .eot, .svg itd. Postoji i format za moderne preglednike. vau2, no o tome ćemo u jednom od sljedećih članaka. Obično je svaki font uključen u 3 formata odjednom. To je učinjeno tako da se font ispravno prikazuje u svim preglednicima, uključujući. i one stare. Ovako izgleda:
@font-face { obitelj-fontova: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"), url( "../fonts/RalewayRegular/RalewayRegular.woff") format( "vaf"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") format( "truetype"); stil fonta : normalan; težina fonta: normalna; }
Ovdje slijedi Obratite pozornost na redoslijed povezivanja - ovo je važno!
Nećemo ulaziti u detalje, sjetite se samo izgleda ovog dizajna.
Ako imate font u samo jednom formatu, koristite različite pretvarače fontova. Ovdje je jedan od njih.
Kako spojiti 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 s Moguta CMS predloškom 
Kako dodati vezu s Google fontovima na Moguta CMS predložak
Sada znate kako dodati font web stranici koristeći CSS i više. Rado ćemo odgovoriti na sva Vaša pitanja Neki dan sam još jednom odlučila početi raditi sklekove. Jedan učitelj kojeg cijenim tvrdi da ova vježba ima gotovo magičan učinak ako se pravilno izvodi.
Eto, postavio sam eksperiment na sebi, a kako bih otežao skok, odlučio sam javno objaviti “laboratorijsku bilježnicu” i postavio je na napušteni blog.
Stari dizajn nije odgovarao novoj ideji, i bez oklijevanja sam iz općeg WordPress repozitorija uzeo onaj koji mi se više-manje sviđao.
Znate li u čemu je problem s nekim gotovim predlošcima preuzetim od tamo? Problem je nespretna kompatibilnost s ćiriličnim fontovima. U mom slučaju, zaglavlja su patila. Budući da font na koji upućuje CSS nije sadržavao ruske znakove, oni su preuzeti iz zadanog fonta (bilo Sans ili Arial). Kao rezultat toga, naslovi su bili OGROMNI i uništili su cijeli izgled. Morao sam razmisliti kako zamijeniti font.
Postoji nekoliko načina za to.
Metoda 1: Glupo
Sve se svodi na činjenicu da pronađete odgovarajući font na Internetu, instalirate ga na svoje računalo, napišete ga u CSS-u i vidite svoju stranicu kako je zamišljena.
Drugi ga i dalje vide, u najboljem slučaju, sa zadanim fontovima, au najgorem slučaju, čak i izvan tiska.
Ne radi to!
Metoda 2: Pretvorite dizajn u standardni font
Ovo je najidealnija opcija, ali, nažalost, nije uvijek prikladno, jer se ponekad zbog toga gubi "zest" dizajna. Međutim, UVIJEK razmislite o ovom pristupu, jer koliko god se trudili, moguće je da će klijentsko računalo i dalje koristiti font koji je dostupan.
Sigurni fontovi koji su dostupni na gotovo svim operativnim sustavima su: Verdana (idealno za tekstove),Udarac (ponekad vrlo dobro u naslovima), Arial, Arial Black, Comic Sans MS (kaka, koja je vrlo popularna među početnicima), Kurir Novo (prikladno za primjere koda i obrasce), Georgia, Times New Roman, Trebuchet MS.
Metoda 3: Slika umjesto teksta
Opcija je vrlo cross-browser i prikladna za dizajniranje statičnih elemenata. Na primjer, zaglavlja web mjesta. Napravite transparentni PNG s tekstom u željenom fontu, obradite ga po potrebi i ubacite u stranicu, ne zaboravite ispuniti ALT. Ili isto, ali zalijepite tekst na neku pozadinu i spremite ga kao JPG.
Osim zaglavlja, morao sam promijeniti izgled zaglavlja i widgeta posta. Pa, zašto ne napraviti zasebnu sliku s naslovom za svaki unos?
Iako postoje majstori koji generiraju slike s naslovnim tekstom pomoću poslužiteljskih skripti, to je već perverzija.
Metoda 4: Cufon
Ovi programčići mogu se generirati iz datoteke fonta pomoću mrežnog generatora http://cufon.shoqolate.com/generate/
Najlakši način je koristiti http://www.google.com/fonts Odaberite željeni font od prikazanih i dobijete gotov kod koji trebate ubaciti u stranicu (u head i style file), nakon čega sve radi.
Ali nisam želio koristiti dodatni javascript, zamarati se generiranjem apleta itd. Htjela sam sve učiniti brzo i jednostavno. Štoviše, datoteka sa traženim fontom već je dugo bila dostupna.
Metoda 4: Povežite font sa web mjestom pomoću CSS-a
Internet je pun vodiča na ovu temu. No, isprobavši ih pet, došao sam do katastrofalnog rezultata. Moj TTF font bio je prikazan normalno samo u IE. U drugim preglednicima nemilosrdno ga je zamijenio Arial.
Priznajem da nisam ljubitelj IE-a i smatram ga preglednikom za preuzimanje preglednika. Ne više! Dakle, morao sam napraviti malo poboljšanje.
Za povezivanje fonta sa web mjestom pomoću CSS-a, potreban nam je sam font (datoteka) i online pretvarač http://onlinefontconverter.com/
Može postojati veliki izbor mrežnih pretvarača fontova. Neki su zatvoreni, novi se pojavljuju na njihovom mjestu, pa ako ovaj više ne postoji, potražite u tražilicama upit poput "online font converter" i pokušajte tamo pretvoriti fontove. U ovom postu navedeni pretvarači korišteni su kao primjer.
1. Idite na web mjesto pretvarača , zgrabite font koji imate i povucite ga u ovaj prozor (obično je u desnom stupcu).
2. Preuzmite font u 4 varijante: EOT, OTF, TTF i WOFF. Ovo bi trebalo biti dovoljno. Preglednik će u procesu renderiranja stranice odabrati i preuzeti onu koja mu više odgovara.
3. Učitajte fontove na web stranicu. Napravio sam mapu za ovo u korijenu stranice "f" i smjestio ih tamo.
Ažuriranje 16.02.2015.: Zasad onlinefontconverter.com prepravljeno i nije konvertirano niti jedan od predloženih fontova((
Morao sam koristiti stranicu font2web.com. Ovaj nudi sve potrebne fontove odjednom u paketu u jednoj arhivi. Udobno!
4. Povežite učitavanje fonta sa web mjestom. Da biste to učinili, unesite ovaj kod u css datoteku ili u odgovarajuće stilske oznake.
@font-face( obitelj-fontova: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. ajme);)
obitelj-fontova: EtoMoiFont;— govori pregledniku kako će se zvati učitani font. Sami smislite ime.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— određuje putanju i nazive datoteka fontova.
Zašto su fontovi ovim redoslijedom?
Prvi stavio sam EOT. Ovaj format koriste starije verzije IE-a.
Drugi — OTF. Ovo je komprimirani format fonta koji bi trebao biti lakši.
Treći — TTF. Gotovo svi preglednici to razumiju. Iako, događa se drugačije. Na primjer, na iOS-u se možda neće otvoriti.
Posljednji — WOFF. Ovo bi trebalo dobro čitati na Mac računalima, ali još nisam imao vremena provjeriti.
5. Označite u datoteci stila , koja bi se obitelj fonta trebala koristiti za prikaz naslova (u našem slučaju, naslova h2).
h2(familija-fontova: EtoMoiFont;)
Spreman!
Ako fontovi nisu primijenjeni, provjerite: prvo, koristi li web mjesto css datoteku (ponekad trebate resetirati predmemoriju, ponekad potražite drugu css datoteku), drugo, koristi li se font za klasu (id ili oznaka) koje ste naveli. nisu blokirani u drugoj css datoteci koja se učitava nakon ove.
Ljepota ove metode je u tome što u budućnosti mogu postaviti ovaj font za bilo koji spremnik teksta.
Evo što se dogodilo.
Nedostatak metode je što postavke preglednika nekih paranoičnih korisnika mogu zabraniti učitavanje vanjskih fontova, flasha, 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 sigurnima metoda 2, a zatim ponovno učitajte svoj. Ako su veličine više-manje iste i ništa se nije odmaknulo, onda je u redu.
I dalje! Testirajte metode samo na računalima na kojima nije instaliran font s kojim ćete raditi. Inače će uspjeti metoda broj 1.
To je sve. bio sam s tobom.
Do sljedećeg puta.
