Vlad Merzhevich

Font je sastavni dio web dizajna, daje sajtu izražajnost i prepoznatljivost, izražava karakterističan stil stranice i direktno je vezan za percepciju tekstova. Dobro odabran font se možda neće primijetiti, ali bez njega neće biti poleta koji upotpunjuje dizajn web stranice.

Ako već imate instaliran određeni font na vašem računalu, tada je u stilove dovoljno dodati liniju.

h1 (familija fontova: SuperPuperFont;)

Vrijednost svojstva font-family je ime fontova i bit će primijenjena na sve naslove

... Ali šta će posjetioci web stranice vidjeti ako nemaju instaliran naš spektakularan i rijedak font? Ova situacija je najvjerovatnija, pa ako pretraživač ne prepozna deklarirani font, koristit će zadani font, na primjer, u Windows-u je Times New Roman. Sav naš pažljivo osmišljen tip dizajna će se raspasti preko noći, tako da moramo tražiti najsvestranije rješenje. Prva stvar koja vam odmah pada na pamet je organizirati preuzimanje datoteke fonta na računar korisnika i prikazati tekst u odabranom fontu. U poređenju sa drugim metodama kao što je prikazivanje teksta kroz sliku, ovaj metod je najjednostavniji i najsvestraniji.

Koje su prednosti preuzimanja fajla sa fontovima i zatim ga primjenjuju putem CSS-a.

• Tekst je lako dodati i urediti.
• U pretraživaču možete koristiti pretragu i pronaći željene fraze.
• U postavkama pretraživača možete smanjiti ili povećati veličinu fonta kako biste postigli ugodno gledanje.
• Pretraživači dobro indeksira sadržaj dokumenta.
• Tekst se može odabrati i kopirati u međuspremnik, kao i prevesti na drugi jezik.
• Parametri teksta kao što su razmak između redova, boja, veličina i slično lako se mijenjaju pomoću CSS svojstava.
• Opet, putem CSS-a možete jednostavno dodati različite efekte tekstu, na primjer, sjenu.

Kao što vidite, prednosti su brojne. Postoje i manji nedostaci i vrijedni su pomena zbog ravnoteže.

• Ne podržavaju sve verzije pretraživača font za preuzimanje i isti format za sve.
• Datoteka koja sadrži font može zauzeti veliki volumenčime se usporava učitavanje web stranice.

Table 1 navodi verzije pretraživača i formate fontova koje podržavaju.

Tab. 1. Podržani formati

Format	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Najpodržaniji format je TTF. Sa izuzetkom IE do verzije 9.0 i iOS-a, svi pretraživači to savršeno razumiju. Dakle, ako imate font u ovom formatu i ciljate moderni pretraživači, nije potrebna nikakva dodatna radnja. Dovoljno je napisati sljedeći kod u stilovima (primjer 1).

Primjer 1. Povezivanje TTF-a

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Prvo učitajte samu datoteku fonta koristeći pravilo @ font-face. Unutar njega pišemo ime fontova koristeći parametar font-family i putanju do datoteke koristeći src. Zatim koristimo font kao i obično. Dakle, ako trebamo postaviti font za naslov, onda za h1 selektor, kao što je prikazano u primjeru, postavljamo svojstvo porodice fontova s ​​imenom učitanog fonta. Za starije verzije IE-a navodimo rezerve odvojene zarezima. V ovaj slučaj font naslova će biti "Comic Sans MS" budući da IE8 i niži ne podržavaju TTF format.

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Zaglavlje sa preuzetim fontom

Šta ako vam je potreban kitnjasti font u IE8? Na sreću, @ font-face vam omogućava da uključite više datoteka fontova u isto vrijeme. različitim formatima... Pregledač samo mora odabrati odgovarajući. Dakle, univerzalno rješenje koje radi u svim pretraživačima svodi se na pretvaranje postojećeg TTF formata u EOT i zatim povezivanje oba fajla.

Za konverziju, postoji nekoliko online usluga koje vam omogućavaju da preuzmete TTF datoteku i dobijete EOT datoteku na izlazu. Nažalost, većina ovih servisa ima isti problem - dobijamo datoteku, ali ruski jezik nije podržan u njoj. Kao rezultat toga, željeni rezultat nije postignut, konverzija je netočna. Među stranicama koje sam provjerio, bio je jedan koji je ispravno prikazivao tekst u IE.

Idite na ovu stranicu, učitajte TTF datoteku i pritisnite dugme "Pretvori TTF u EOT", nakon čega ćemo rezultujuću datoteku pohraniti u mapu fontova. Ostao je mali trik u stilovima da se natjeraju različiti pretraživači da učitaju font u ispravnom formatu. Da biste to učinili, dodajte dva src parametra. Prvi upućuje na EOT datoteku i za starije verzije IE-a. Drugi src parametar mora sadržavati dvije adrese odvojene zarezima, od kojih jedna ukazuje na TTF datoteku. Činjenica je da IE verzija 8.0 i ranije ne razumiju zarez u src parametru i, shodno tome, potpuno će zanemariti parametar. Može postojati nekoliko opcija pravopisa, na primjer, ponoviti url, navesti ime fonta unutar lokalnog parametra ili napisati nepostojeći font u potpunosti. Ako pretraživač ne može učitati takav font, on će ići na drugi na listi i imamo ga ispravno napisan. Prihvatljivi načini pisanja.

src: url (fontovi / pompadur.ttf), url (fontovi / pompadur.ttf);
src: lokalni (pompadur), url (fontovi / pompadur.ttf);
src: lokalni ("bla bla"), url (fontovi / pompadur.ttf);

Radna opcija za povezivanje fonta za sve verzije pretraživača prikazana je u primjeru 2.

Primjer 2. Povezivanje EOT-a

HTML5 CSS3 IE Cr Op Sa Fx

Savremeni element političkog procesa

Zapravo, politička doktrina Montesquieua predvodi kontinentalno-evropski tip političke kulture, što se odrazilo u Michelsovim radovima.

Što se iOS-a tiče, čini mi se da nema puno smisla praviti i preuzimati poseban font u SVG formatu. Publika sajtova koji ga pregledavaju preko iOS-a je još uvek mala, osim toga, verzija sajta je ispod mobilnih uređaja pokušavaju olakšati, a nije preporučljivo preuzimati dodatnih nekoliko desetina kilobajta.

Google Web Fontovi

Zgodnu uslugu koja preuzima rutinu podrške različitim formatima fontova i verzijama pretraživača možete pronaći na www.google.com/webfonts... Iako u kolekciji ima relativno malo različitih fontova (ima ih nekoliko desetina), svi su vrlo kvalitetni i besplatni za korištenje na web stranicama.

Prije nego što odaberete font, promijenite vrijednost Script na ćirilicu, tada ćete vidjeti listu fontova koji podržavaju ruski (slika 2).

Rice. 2. Odabir fontova u Google Web Fontovima

Font koji vam se sviđa treba prvo dodati u kolekciju klikom na dugme "Dodaj u kolekciju", a zatim na dugme "Koristi" u donjem desnom uglu ekrana. On sljedeća stranica(sl. 3) konačno možete odabrati fontove koje želite. Treba imati na umu da font može sadržavati nekoliko stilova, a svaki od njih povećava volumen preuzetih datoteka.

Rice. 3. Fontovi učitani na stranici

Možete povezati odabrane fontove koristeći jedan od tri načina, dodani kod se može kopirati niz stranicu.

1. Kroz element ... Linija će izgledati otprilike ovako.

2. Putem pravila @import. Ovu liniju ubacujemo u našu CSS datoteku na samom vrhu.

@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Putem JavaScripta.

U osnovi, svi putevi su jednaki, pa birajte prema vašim željama.

Prednosti primjene ovu uslugu takav.

• Fontovi su besplatni za korištenje, ne morate ih plaćati.
• Ponuđeni fontovi su "izoštreni" za gledanje na ekranu, fajlovi su optimizovani i zauzimaju relativno mali volumen.
• Pretraživač se automatski otkriva i za njega se prikazuje font u potrebnom formatu.

Jedna od glavnih prednosti servisa je to što se fontovi pohranjuju u TTF, EOT, WOFF, SVG formatima i učitavaju nakon provjere pretraživača. Dakle, EOT format će biti dostupan samo za starije verzije IE-a.

Na vama je da li ćete koristiti Google Web Fontove ili ne. Ako tamo niste pronašli odgovarajući font, uvijek možete povezati popularni i rasprostranjeni TTF. Štaviše, podržan je najnovije verzije svim popularnim pretraživačima.

// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // prikazati moju veličinu sličice?>

U ovom vodiču ćemo analizirati kako uključiti web fontove u izgled. Web fontovi su komplementarni fontovi koji se koriste kako bi dizajn učinili jedinstvenijim ili raznovrsnijim. Povezivanje fonta na stranici - osigurava njegov ispravan prikaz u svim pretraživačima, i nije bitno da li ga je korisnik instalirao ili ne.

Kako povezati font iz Google fontova

Korak 1 - odaberite font

Servis Google fontovi ima veliki skup web fontova koji se mogu povezati s projektom u jednom redu i odmah koristiti u CSS stilovi... Da biste za pregled odabrali samo ćiriličke fontove, u filteru lijevo u parametru Script morate odabrati vrijednost Ćirilica (za ćirilicu) ili Ćirilica proširena (za proširenu ćirilicu). Nakon toga, desno će biti prikazani fontovi koji podržavaju ćirilicu.

Za brzu upotrebu kliknite na dugme Brza upotreba.

Korak 2 - podešavanje postavki fonta

Na sljedećoj stranici biramo koje ćemo fontove koristiti. OpenSans ima 10 težina, od vrlo tankih do ekstra podebljanih. Što je više stilova odabrano, to će više uticati na brzinu učitavanja stranice. Stoga je vrijedno povezati samo fontove koji se koriste. Nakon toga možete odabrati skupove znakova, za ćirilicu biramo proširenu ćirilicu ili ćirilicu i latinicu.

Korak 3 - kod za povezivanje fonta

Zatim uzimamo liniju koda da se povežemo s vašom web lokacijom. Standardna opcija - povezivanje css fajla treće strane iz html-a, na kartici @import - biće string za povezivanje preko css fajla i treća opcija za Javascript. Nakon toga, veza je spremna i možete koristiti ovaj tip slova u izgledu. Blok ispod pokazuje primjer kako pristupiti fontu: font-family: "Open Sans", sans-serif;

Postavite širinu pomoću parametra font-weight: 300; ili font-weight: 400; font-weight: 800; Kurziv - putem stila fonta: kurziv; ...

Primjer upotrebe

Kao rezultat toga, ako smo odabrali da povežemo font preko @import u CSS-u, naš CSS fajl će izgledati ovako:

/ * Veza fontova * / @import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Definirajte stil za naslov h1 * / h1 (/ * Odaberite povezani font "Open Sans" kao font * / font-family: "Open Sans", sans-serif; / * Odaberite veličinu fonta 300 , koji će odgovarati stilu fonta - za tanku veličinu * / font-weight: 300;)

Pozdrav dragi čitaoci. Danas ćemo razgovarati o google web fontovima, kako ih preuzeti i povezati se na stranicu.

Idite na stranicu www.google.com/fonts/, u filteru sa desne strane izaberite: 1. željenu kategoriju, 2. ako je potrebno sortirajte ih i 3. izaberite jezik koji nam je potreban (ako vam je potreban ruski font u meniju sa leve strane izaberite Ćirilica).

Dakle, odabrali smo font, sada moramo odabrati njegov stil, za to proširite panel ispod ( Otvorite ladicu za odabir) i idite na karticu PRILAGODI i odaberite stilove i jezike koje želite.

Za preuzimanje kliknite na dugme download.

Povezivanje preuzetog fonta

Kopirajte fontove sadržane u arhivi u / fonts folder, koji bi trebao biti u istom direktoriju kao / css mapa vaše HTML stranice.

Standardno povezivanje preuzetih fontova izgleda tako

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") format ("embedded-opentype"), url ("Font_file_name" .eot .woff ") format (" woff "), url (" Font_file_name.ttf ") format (" truetype "), url (" Font_file_name.svg #DSNoteRegular ") format (" svg "); font-weight: normalan ; font -style: normal;)

U mom slučaju, veza će izgledati ovako

/ * Kod za povezivanje fonta u /css/style.css * / @ font-face (familija fontova: "RobotoRegular"; url ("../ fonts / RobotoRegular.ttf") format ("truetype"); font - stil: normalan; font-weight: normalan;)

Da biste povezali font po svom izboru sa web lokacijom, idite na karticu EMBED, tamo ćete vidjeti 2 načina povezivanja:

1. STANDARD

Ovaj kod treba dodati u odjeljak vaš HTML dokument.

2. @IMPORT

@import url ("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Bitan. Bez obzira na način povezivanja, koristite sljedeća CSS pravila da definirate ove porodice: font-family: 'Roboto', sans-serif; više o ovome u nastavku.

Zdravo svima! O tome možete čitati, pisao sam u lekciji 132. I u ovom članku ću vam reći kako možete brzo i jednostavno povezati font sa svojom web lokacijom iz Google Fontova. Na usluzi Google Font morate odabrati font za svoju web lokaciju, a zatim ga povezati.

Nije potrebno uploadati datoteku fonta na hosting. Dovoljno je upisati traženi HTML kod u zaglavlje stranice i u naziv novog fonta. Fontovi se mogu povezati ne samo na WordPress stranicu, već i na bilo koju drugu stranicu.

Kako povezati Google fontove sa svojom web lokacijom

Idi Google usluga Font na ovom linku i odaberite font koji nam je potreban.
Fontovi se mogu odabrati kroz filter. Odnosno, mi postavljamo parametre i tako servis pronalazi fontove sa odabranim parametrima.

Po potrebi možete podesiti i druge parametre: debljinu (debljina fonta), nagib (kurziv), širinu (širina fonta).

Takođe morate da izaberete ćirilično pismo ako je vaš sajt na ruskom jeziku: ćirilica (ćirilica), ili proširena ćirilica (proširena ćirilica).

Kada se odaberu parametri, servis će pokazati sve fontove koji su dostupni uz njih.

Pomeramo kursor miša na font koji želimo da instaliramo na sajt, nakon čega se pojavljuju dodatna podešavanja / parametri: Brza upotreba ( brza upotreba), Pop out (pogledajte font u poseban prozor) i Dodaj u kolekciju.

Mi biramo " Brza upotreba„I vidi iz desna strana widget u obliku brzinomjera. Pokazuje koliko se brzo učitava odabrani font. Što je manji broj na ovom brzinomjeru, to bolje.

U nastavku možete odabrati jednu od tri opcije za instaliranje fonta na web stranicu: standart, @import ili javascript.

Svaka opcija ima upute za engleski jezik kako pravilno povezati font sa web lokacijom. pokazaću ti prvu opciju" standart„Zato što je jednostavnije.

Kopirajte liniju označenu crvenom bojom, a zatim je zalijepite u datoteku header.php između oznaka ….

Zatim otvorite stylesheet style.css, pronađite font koji treba promijeniti i napišite novi. Samo napišemo ime novog fonta. Stavite Google Fontove pod navodnike, na primjer, porodica fontova: "Aladin", Arial, Helvetica, Sans-serif.

Ako uopšte niste razumeli šta sam vam ovde rekao, onda pogledajte video gde vam detaljno govorim, Kako povezati Google Font na WordPress stranicu

______________________
Za lekciju 204. i bez dodatka

Sponzor materijala.
Klima uređaji u online trgovini http://www.technodom.kz/catalog/konditsionery. Klima uređaji - najbolja roba, pozajmljivanje, veliki izbor, besprekorna usluga.

Dobar dan, dragi čitaoci. Svi vi vjerovatno sanjate da svoje ili klijentove stranice učinite sažetijima i privlačnijima.

Jedan od glavnih faktora koji je odgovoran za percepciju informacija na stranici su fontovi i način na koji ih zajedno koristimo. Budući da se na jednoj stranici najčešće koriste dvije ili više vrsta fontova, na primjer, za naslove i samo tijelo teksta.

Jedna od mogućnosti za vizuelno poboljšanje čitljivosti tekstova je povezivanje fontova trećih strana. Uostalom, svi vjerovatno znaju kakva je "siromašna" standardna kolekcija ćiriličnih fontova u Windowsu, koja je odgovorna za prikaz teksta u pretraživaču.

Standardni fontovi:

Cufon i @ font-face

Ranije sam već pisao o tome, pomoću kojih možete povezati nestandardne fontove na stranicu. Pogledajmo sada lakši način - ovo je pravilo @ font-face u css-u i učitavanje samog fonta iz trgovine Google Fonts.

Jedina razlika između Cufona i @ font-face je u tome što prvi koristi js da emulira font i crta simbole svojim sredstvima, dok @ font-face preuzima sam font na računar posjetitelja i pretraživač ga već koristi za prikaz tekst.

U svakom slučaju, Cufon i @ font-face usporavaju brzinu učitavanja stranice, iako ne značajno.

Upotreba Google fontova na stranici

Neću puno slikati i još dugo ću dati konkretan primjer povezivanja Google Fontova, koristeći ovaj blog kao primjer.

Kao što vidite, naslovi i podnaslovi mojih članaka su u nestandardnom fontu, pa ću sada u praksi pokazati kako se to radi, a vi ćete po analogiji isprobati na svojim stranicama.

Odabir fonta u spremištu

Da se ne bi uplašio, objasniću - repozitorijum je spremište, ali na buržoaski način :). I tako, idemo na http://www.google.com/fonts/ i potražimo odgovarajući font za sebe:

Nema puno na meniju:
Na lijevoj strani, kao što vidite, nalazi se blok sa svim vrstama filtera za pretraživanje fontova, u kojima možete odabrati, na primjer, samo latinične ili ćiriličke fontove. A na vrhu, postavke za prikaz primjera, koje su podijeljene u 4 kartice:

• Riječ- prikaz više slova. U ovom načinu rada, zgodno je usporediti više fontova odjednom i vidjeti kako izgledaju određeni znakovi;
• Rečenica- prikaz u obliku jedne rečenice;
• Paragraf- prikazuje se veliki dio teksta koji će vam omogućiti da vizualno uporedite font koji je već u samom tekstu;
• Poster- prikazani su naslovi, ovaj način poređenja je pogodan za odabir fonta koji će se koristiti u naslovima.

Povezivanje fonta sa sajtom

Nakon toga, u panelu Kolekcija, koji se nalazi na dnu, idite na karticu Koristi, koja je odgovorna za korištenje fontova iz vaše kolekcije. Ovdje ćete odmah vidjeti da Google pokazuje koliko će se pogoršati brzina učitavanja stranice:

Ispod je panel sa izborom "vrste prikaza", odaberite latinicu (latinica) i ćirilicu (ćirilicu), što će nam dati mogućnost da prikažemo i latinična i ćirilična slova:

Nakon toga prelazimo na treću stavku na ovoj stranici, odnosno na samu vezu. Google nam nudi tri opcije za ugradnju njihovih fontova - putem js-a, standardni način preko veze na i @import u css fajlu. Koristim potonju metodu.

Otvaramo našu css datoteku i upisujemo red koji nam je google dao:

To je to, povezali smo font iz Google Fontova na stranicu, kako ga sada koristiti?

Upotreba u CSS-u

Sve je prilično jednostavno, nakon što smo povezali font preko @import-a, potrebno je da se registrujemo standardno uputstvo za one klase i indikatore za koje će se koristiti naš novi font. Na primjer:

h1, h2, h3 (familija fontova: 'Cuprum', sans-serif;)

Nakon svih ovih manipulacija, imat ćete zaglavlja s novim, nestandardnim fontom.

To je sve, hvala na pažnji i vidimo se uskoro.