Pentru a afla despre tot ceea ce tu - nu este ușor, dar foarte interesant. Dacă aveți cel puțin o idee superficială despre modul în care funcționează site-ul, atunci este mai bine pentru ei să vă implementeze singur proiectul. În același timp, nu veți salva doar o grămadă de bani, dar, de asemenea, să aflați o mulțime de "chipsuri", secrete etc. Utilizarea fonturilor Google de obicei nu atrage atenția, deși datorită lor un blog poate deveni mai interesant.

Serviciu

De mult timp, un serviciu major de fonturi web a apărut pe Internet. A fost dezvoltat de Google. Utilizatorii l-au putut folosi gratuit. În ciuda faptului că setarea acestui tip nu este considerată Super, există încă astfel de oameni care au făcut greșeli și nu au putut face față serviciului.

Pentru a face acest lucru, a fost proiectat un simplu design. Acum, lucrați cu fonturile Fonturilor Google a devenit mai ușor, iar numărul de vizitatori a crescut. Biblioteca sa extins. Anul trecut, serviciul a avut loc un serviciu de redesign care a adunat o mulțime de feedback pozitiv. Acum, oamenii au devenit mai ușor să conectați fonturile pe site-urile lor și să le vizualizeze.

Aspect

Deci, pentru cei care nu au fost niciodată pe site cu vechiul design, trebuie să faceți o imagine generală a schimbărilor. În trecut, serviciul a părut destul de masiv. Oriunde erau cadre groase, butoane atrăgătoare de albastru, grafica nu a fost cea mai mare permisiune. Toate acestea au influențat semnificativ vizitatorul.

Acum, dezvoltatorii s-au concentrat asupra designului materialelor. Toate caracteristicile sofisticate dobândite. Aspectul a devenit "mai ușor". Animație fină, interactivitatea a devenit vizibilă. Nimic altceva nu distrage atenția de la selectarea fontului Google Fonts dorit.

A existat o adaptare convenabilă a resursei pentru dispozitivele mobile. Desigur, o astfel de schimbare nu este mult vizibilă față de contextul inovațiilor, dar luând în considerare bug-urile versiunii anterioare vor fi pentru utilizatorii Avid ai "Manna Ceresc".

Oportunitate

Servicii frecvent similare sunt folosite de designeri. În ciuda experienței și profesionalismului, ei lucrează și cu vizualizare. Redesign a prezentat caracteristici mai similare care vă vor permite să combinați în prealabil ceea ce va fi necesar să implementați mai târziu în proiectul dvs.

Prin urmare, problema cu modul în care un font este combinat cu o culoare diferită și a treia fundal, a dispărut. Compania a adăugat mai multe instrumente și o paletă cu tonuri universale, care ar permite experimentarea și a afla cum unul sau altul vor arăta într-o anumită culoare.

Selectat

Serviciul Google Fonts Fonts oferă utilizatorilor utilizând opțiunile selectate. Într-o filă specială, un set de stiluri pe care dezvoltatorul le recomandă utilizarea este colectată. Aceste colecții sunt alocate printre celelalte. Acestea sunt dezvoltate de experți de la agențiile Google și de la terți. Cele mai multe dintre ele au un anumit stil și filosofie specială.

Vedere

Una dintre schimbările importante afectate direct alegerea fonturilor. Se înțelege că mai devreme utilizatorul a văzut un desen cu butoane suplimentare și un albastru mare, care a adăugat un font la colecție. În general, această opțiune arăta bine, dar nu întotdeauna boxul a avut o rezoluție destul de bună a imaginii cu un stil și, prin urmare, a fost ușor să se determine cum va arăta fontul.

Au existat întrebări și aceste butoane suplimentare care au fost cunoscute la prima vedere. A fost necesar să le aduceți sau să le utilizați. Acum a devenit mai mult sau mai puțin clar. Există caracteristici suplimentare:

• Selectați o propunere specifică, paragraf sau propriul element de text.
• Experimente de saturație font.
• Setarea rapidă a dimensiunilor utilizând un cursor.

Apropo, schimbarea dimensiunii fonturilor Google a devenit adaptabilă, ca un exemplu schimbat, și nu totul pe pagină. În vechea versiune a utilizatorilor, aceasta ar putea fi transferată de la o margine a paginii la alta, iar în noul stați doar pe acel exemplu, care este reglabil.

Conexiune

Dacă sunteți gata să utilizați acest serviciu, puteți încerca să conectați fonturile la resursa dvs. Procesul de obținere a legăturilor este universal. Problemele pot apărea în funcție de sistemul dvs. CMS. Fiecare folosește propriile moduri. Prin urmare, pentru diferite proiecte va trebui să selecteze opțiunile individuale.

Ne vom uita la modul de a obține un link pentru a conecta Fonturile Google. Trebuie să mergeți la site-ul oficial al Fonturilor Google. Acolo veți vedea catalogul stilurilor și alegeți cel care se potrivește cel mai bine. Pentru a face acest lucru, alături de el, faceți clic pe "Plusik". După ce fontul va fi adăugat la blocul special din partea de jos a paginii.

Faceți clic pe această unitate și apoi configurați-l. Aici puteți alege inscripția și alfabetul necesar. Dacă aveți nevoie de Google Fonts Cyrilic, apoi marcați șirul chirilic. După ce link-ul va fi format. Acesta poate fi găsit în aceeași fereastră din fila Embed. Este suficient doar să o copiați sau să utilizați codul complet HTML.

De obicei, în setările site-ului există un font și culori. Există opțiuni standard și puteți adăuga extins. Acestea au o opțiune separată pentru Fonturile Google. Dacă trebuie să descărcați fonturile prin pluginul Suprem WebFonts.

Opțiuni populare

Este dificil, desigur, de a judeca ce stiluri sunt mai bune, în special pentru subiecte diferite ale site-ului. Când creați site-ul dvs., amintiți-vă că nu ar trebui să vă placă, ci publicul dvs. Prin urmare, este mai bine să vă uitați la site-urile concurenților.

De obicei, pentru resursele comerciale nimeni nu deranjează despre stiluri. La urma urmei, dacă vedeți fontul din Google Chrome din magazinul online, este puțin probabil să acordați atenție acestuia. Dar dacă aveți un blog, atunci, cel mai probabil, ceva ce vă place și ceva, dimpotrivă, se va supăra.

Fonturile Google a pregătit multe colecții în care există stiluri populare. De exemplu, homar dragostea de a utiliza pentru blocuri individuale din text. Este dificil să se citească dacă întregul articol este scris într-o astfel de caractere italice. Dar arată inserții bune și citate.

Scriptul rău este, de asemenea, o opțiune pentru bloguri. Cursiv Tip greu pentru a citi margini mari de text, dar puteți aloca ideea principală. Stilul imită scrierile de mână scrise de mână. Jura Normal 400 este o opțiune interesantă pentru chirilică. Autorul susține că este Eurostil de la familia SIP SENS. Arată foarte bine și are mai multe variante.

Prima parte a capitolului este dedicată cunoștinței cu fonturile CSS. Pe această pagină, veți învăța cum să conectați fonturile în CSS, ceea ce este Fonturile web și cum să lucrați cu ele, ce formate de font sunt cum să utilizați Fonturile Google. Pentru a începe, luați în considerare un exemplu ușor de conectare a fontului CSS:

P (Font-Family: Verdana;)

Această mică bucată de cod înseamnă că la toate etichetele

Se aplică fontul Verdana. Proprietatea familiei de font stabilește care vor fi folosite fonturi sau fonturi. Afișarea corectă a acestui stil în browserul utilizatorului depinde de faptul dacă fontul specificat este instalat pe computerul său. În cazul nostru, dacă fontul Verdana lipsește pe computerul utilizatorului, browserul va afișa fontul setat în mod implicit.

La un moment dat, designerii au trebuit să specifice suplimentar mai multe fonturi de rezervă în cazul în care computerul utilizatorului va lipsi. Să presupunem că doriți să emită un text cu fontul Verdana și să instalați TREBUCHET MS, Fonts Geneva și orice font fără seri. Acest lucru este scris în acest fel:

P (Font-Family: Verdana, "Trebuchet Ms", Geneva, Sans-Seif;)

Când procesați acest cod, browserul va verifica mai întâi prezența fontului Verdana pe computerul utilizatorului. Dacă fontul este prezent, conținutul etichetelor

Afișat acest font. Dacă fontul lipsește, browserul va verifica prezența următoarelor pe lista de font - Trebuchet MS. Dacă acest font lipsește, următorul font va fi verificat - Geneva. Dacă nu există nicio genva pe computerul utilizatorului, browserul va alege un alt font disponibil fără seri și afișează textul.

Notă: În cod am înregistrat numele fontului TREBUCHET MS în citate. Trebuie să luați numele fontului în citatele duble sau singure atunci când există spații.

Despre ce este un font cu Serif (Serif) și fără (Sans-Seif), puteți citi pe pagina Wikipedia.

Fonturile web

Metoda de mai sus de utilizare a fonturilor are un minus imens - sunteți limitat în cantitatea de fonturi. Va trebui să vă mulțumiți doar cu cele ale opțiunilor lor, care sunt cel mai probabil instalate pe majoritatea computerelor.

Cum puteți crește selecția de fonturi pentru a face pagina de proiectare individuală, adăugați originalitatea? Fonturile web vin la salvare. Citiți capitolul și veți învăța cum să lucrați cu ei.

Deci, pentru a afișa fontul dorit în browserul utilizatorului, avem nevoie de acest font pentru a încărca computerul. Este destul de simplu să o puneți în aplicare. Această metodă de conectare a fonturilor la CSS deschide oportunități foarte ample înainte de designeri. Dar merită menționat despre o lingură în barilul de miere: În primul rând, nu fiecare browser acceptă un anumit format de font (care va determina că fontul nu apare) și, în al doilea rând, dacă fișierul cu un font are o mulțime de greutate, Poate încetini pagina de descărcare.

Formate de sprijin

Cum de a face față problemei eșecului formatului de fișier? Să aruncăm o privire la masa în care sunt afișate cele mai populare formate de fonturi și aflau că browserele sunt acceptate de:

Notă: Puteți afla întotdeauna informații locale pe suport pentru formatele de fonturi pe CANIUSE.COM. În șirul de căutare, trebuie să introduceți numele formatului (de exemplu, TTF).

Dacă sunteți orientați cu browsere moderne, veți folosi formatul fontului TTF - cel mai frecvent și utilizat. În cazul în care trebuie să aveți mai multe formate de un font, puteți utiliza convertoare speciale online de la un format la altul și apoi conectați toate fișierele la rândul lor. Astfel, browserul va putea alege formatul de font cu care funcționează.

Conectăm un font Web cu @ Font-Face

Să presupunem că aveți propriul dvs. font unic numit MyuniqueFont în format TTF și doriți ca textul de bază al paginii web să fie afișat de acest font. Primul lucru pe care trebuie făcut-o este să copiați fișierul font în dosarul unde sunt localizate toate celelalte fișiere de site-uri. Pentru a nu crea o mizerie, puteți crea un folder separat special pentru fonturi, apelându-l, de exemplu, fonturi.

@ Font-fata (Font-fata: MyuniqueFont; SRC: URL ("fonturi / myuniquefont.ttf");)

Proprietatea de font-familială în acest caz joacă un alt rol: Cu aceasta, atribuim numele fontului, apoi să folosim acest nume când scrie stilul:

P (Font-Family: Myuniquefont;)

A doua linie indică calea către fișierul font. În exemplul nostru, fișierul este MyuniqueFont.ttf este situat în dosarul Fonts. Aveți o adresă URL poate diferi.

Fonturi Google Fonturi.

Google face posibilă conectarea cu ușurință a oricărui font din colecția Google Fonts. Tot ce trebuie să faceți pentru a începe să utilizați fontul care vă place, - Specificați mai multe setări de pe pagina Font din Google, după care copiați link-ul special la acest font și adăugați la documentul dvs. web.

Notă: Întreaga colecție de fonturi de la Google este disponibilă pe site Google Fonturi. . Pagina Puteți utiliza diverse filtre pentru a căuta fonturi după categorie, grosime, alfabet.

Mai jos descriem fiecare pas de conectare la Google. Pentru a înțelege despre ce vorbim, selectați orice font din pagina Google Fonts și deschideți-o făcând clic pe butonul de utilizare rapidă.

Pasul 1: Selectați Inteligență

Primul lucru de pe pagina de font selectat va afișa opțiunile pentru inscripția sa, precum și pictograma vitezometrului, ceea ce înseamnă nimic altceva decât viteza de încărcare a fontului. Cele mai multe stiluri pentru fontul pe care îl alegeți, cu atât mai mult timp va fi necesar pentru descărcarea sa. Prin urmare, se recomandă alegerea numai a acelor opțiuni de proiectare care sunt planificate să fie utilizate.

Pasul 2: Selectați Alfabet

Apoi, pe pagină există o oportunitate de a alege un set de caractere: latina, chirilică etc., în funcție de font, nu toate variantele alfabetice pot fi disponibile. Similar cu elementul anterior, este mai bine să puneți o bifă numai în fața alfabetului care va avea nevoie.

Pasul 3: Adăugați codul la site

Primul mod implică adăugarea unui link către Google Server la codul HTML, de unde este descărcat fontul. Trebuie să copiați piesa de cod gata și să o plasați între etichete. În documentul dvs. HTML. Exemplu:

...

Al doilea mod este de a conecta fontul utilizând Directiva @Import. Codul finit este amplasat în cea de-a doua filă a paragrafului 3 de pe pagina fișierului Google selectat. Trebuie să fie adăugată la începutul foii de stil (altfel fișierul nu este importat). Codul arată astfel:

@Import URL (http://fonts.googleapis.com/css?family\u003droboto&subset\u003dlatin.cirilic);

Particularitatea primei metode este că va trebui să adăugați un link la font la titlul fiecărei pagini, unde este planificată să fie utilizată. Este ușor de implementat pe site-uri cu un număr mic de pagini, dar problematic pentru resurse mari. A doua metodă este convenabilă deoarece codul poate fi plasat la începutul foii de stil exterior și apoi toate paginile la care acest tabel este conectat vor primi fontul dorit, care va fi încărcat utilizând Directiva @Import.

Pasul 4: Creați stilul

După implementarea pașilor anteriori, puteți începe aplicarea fontului. Pe măsură ce regula CSS este scrisă, ați văzut deja mai devreme:

P (Font-Face: "Roboto", Sans-Seif;)

Dacă, în primul pas, ați ales mai multe opțiuni de proiectare (de exemplu, a fost adăugată versiunea Bold 700 Bold), apoi în a treia etapă codul va modifica ușor:

@Import URL (http://fonts.googleapis.com/css?family\u003droboto: 700,400 & subset \u003d latin.cyrilic);

Pentru a da apoi accidentului de grăsime al fontului, scrieți stilul CSS în acest fel:

P (font-fata: "roboto", sans-serif; greutate font: 700;)

Notă: În fonturile Google, numai unitățile convenționale de la 100 la 900 sunt utilizate pentru a desemna saturația fonturilor. Deci, designul normal (implicit) este echivalent cu valoarea 400 (normal), iar standardul Bold este echivalent cu 700 (îndrăzneț).

Principalele avantaje ale serviciului Google Fonts este:

• ușurința de utilizare (chiar și noul venit va fi capabil să facă față serviciului, iar tot codul necesar este generat automat - rămâne doar pentru ao copia);
• disponibilitatea fonturilor (nu este nevoie să plătească acestora);
• sunt furnizate toate formatele de fonturi (aceasta înseamnă că fiecare browser va putea încărca exact formatul de font cu care funcționează).

Printre deficiențele serviciului nu este o varietate foarte mare de fonturi, în special chirilice. Apropo, există și alte servicii similare pe Internet, de exemplu, tipkit (plătit).

Rezultate

Astăzi, avem mai multe opțiuni pentru conectarea fonturilor originale și non-standard la paginile web. Fiecare dintre aceste metode are argumentele și contra. Ce opțiune este mai bine de utilizat, trebuie să vă determinați. Deseori depinde de situație, iar diferite abordări pot fi utile în cazuri diferite. În acest stadiu, trebuie doar să știți cum să utilizați fonturile în CSS.

Google Fonts este una dintre cele mai bune resurse cu fonturile web gratuite, iar Google vă oferă mai multe modalități de a le importa pe site-ul dvs. web. Din păcate, niciunul dintre ele nu include un motor popular WordPress. Aceasta înseamnă că trebuie să utilizați fie plugin-uri, care sunt multe mâini, crescând cu codul.

Vestea bună este că puteți instala orice font din biblioteca Google practic pe orice temă WordPress fără prea multe necazuri. Cât de precis - vă vom învăța astăzi.

Există două opțiuni - Conectați pluginul sau un pic la Pierce cu fișierul funcțiilor.php.

Dar mai întâi aș dori să enumerez avantajele și dezavantajele Fonturilor Google, astfel încât să decideți în cele din urmă să le utilizați în proiectele noastre sau nu.

Fonturile Google Google Google și Bad Google

În ceea ce privește fonturile web, Google este una dintre cele mai bune opțiuni. În ceea ce privește performanța . Toate datorită designului ușoare și a sistemului de caching. Vizitatorii nu ar trebui să aștepte fonturile Google, dacă au vizitat recent site-ul pe care au fost utilizate. Fonturi populare, cum ar fi SANS Open, vă pot îmbunătăți performanța site-ului prin reducerea timpului de descărcare.

O altă caracteristică este aceea Google vă permite să încărcați aceste fonturi Deci, le puteți folosi în aspectul tău.

Și, în sfârșit platforma este complet gratuită . Pentru a începe să utilizați fonturile, trebuie doar să vă conectați sau să începeți o căsuță poștală la Gmail (și care nu are poștă la Gmail astăzi).

De defecte Puteți specifica acest lucru alegerea Google-Fonts este mică Multe dintre ele sunt similare unul cu celălalt. Este necesar să petreceți o mulțime de timp în căutare pentru a găsi un font decent, original. Fonturi pentru chirilice foarte puțin.

În plus, sunt obișnuite probleme de siguranță - Trebuie să specificați anumite date personale la instalarea fonturilor de pe Google pe site-ul dvs.

Cum se instalează Fonturile Google utilizând pluginurile WordPress

Dacă sunteți în căutarea pentru pluginuri, primul lucru pe care îl vedeți în rezultatele căutării - plagings WP Google Fonturi și Fonturi Easy Google Google . Acestea sunt într-adevăr cele două pluginuri cele mai bune.

Plugin-urile nu sunt o soluție ideală pentru instalarea Fonturilor Google pe site-ul WordPress - nu numai în ceea ce privește performanța, ci și deoarece pluginurile nu vă permit să alegeți anumite piese de text. Cu toate acestea, dacă dvs. sau clientul dvs. sunteți încrezători că este mai bine să utilizați pluginurile, examinați aceste două opțiuni.

Acest plugin vă permite să vă concentrați asupra elementelor specifice, cum ar fi titlurile H1, paragrafe și citate. De asemenea, primiți o opțiune CSS personalizată pentru a lucra ulterior cu stilurile selectate. Adăugați și configurați fonturile de la Google pe site-ul dvs. WordPress cu acest plugin destul de ușor.

Easy Google Web Fonts justifică numele său și face ca instalarea de fonturi Google să fie super-ușor chiar și pentru începători. Puteți utiliza funcția Live Preview pentru vizualizarea, testarea și optimizarea fonturilor fără a părăsi site-ul web, precum și creați propriile reguli de font fără a scrie o linie de cod.

Modul corect de a instala Fonturile Google în șablonul WordPress

În cele din urmă, ajungem la opțiunea de a deschide funcțiile.php fișier și să lucrăm cu un cod. Înainte de a face acest lucru, trebuie să alegeți un font din biblioteca Google. De exemplu, să încercăm să luăm un foarte popular Deschideți Sans..

Apoi trebuie să alegeți stilul fontului - normal, gras sau italic. Poți să o faci singur :)

După ce alegeți stiluri, Google vă va oferi un cod de fragment. Arata ca aceasta:

În plus, avem stil CSS:

font-Family: "Open Sans", Sans-Seif;

Acum este timpul să deschideți funcțiile. Fișierul Fișier (calea către fișier: WP-Conținut / Teme / YouTheme). La sfârșitul fișierului, adăugați o nouă caracteristică:

funcție load_fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleapis.com/css?family\u003dopen+sans :300Italic 400,500,300"); Wp_enqueue_style ("et-googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");

Cheia acestei caracteristici este comanda "wp_enqueue_style", care provoacă WordPress pentru a apela mesa de stiluri de fonturi din antetul fiecărei pagini. Dacă vă uitați cu atenție, veți vedea, ștergem HREF \u003d și Rel Link \u003d 'Stylesheet' Type'Text / CSS ', de la codul pe care Google ne-a dat Google și va trebui să faceți același lucru dacă doriți să adăugați orice Alte fonturi Google pentru site-ul dvs. pe WordPress.

Tot ce trebuie să faceți acum este să deschideți fișierul CSS principal și să introduceți un stil cu SANS Open. Există reguli normale aici, deci adăugați următorul cod în foaia de stil, salvați și actualizați:

corp.
{
Font: Normal 1EM "Open Sans", Sans-Seif;
Culoare: # 313131;
}

Acest stil va funcționa pe întreg teritoriul site-ului. Pentru fragmentele de text individuale puteți seta un alt stil:

Bold-text
{
Font: Bold 1EM "Deschis Sans", Sans-Seif;
}

După cum puteți vedea, de fapt, totul este foarte simplu. Încercați să verificați rezultatul :)

Vlad Merzehevich.

Fontul este o parte integrantă a designului web, oferă expresivitatea și recunoașterea site-ului, exprimă stilul caracteristic al site-ului și este direct legat de percepția textelor. Nu se poate observa fontul bine ales, dar fără ea nu va exista stafide care dă designul site-ului. Finalizare.

Dacă aveți un anumit font de pe computerul dvs. deja instalat, este suficient să adăugați un șir în stiluri.

h1 (Font-Family: SuperPuperfont;)

Valoarea proprietății Font-Familie este numele căștilor fontului, se va aplica tuturor titlurilor.

. Dar ceea ce va fi văzut vizitatorii site-ului care au fontul nostru spectaculos și rar nu este instalat? O astfel de situație este cel mai probabil, deci dacă browserul nu recunoaște fontul revendicat, acesta va utiliza fontul implicit, de exemplu în Windows ITOW NEW Roman. Toate fanii noștri de gândire atent-out-out peste noapte și merge ca o grămadă, deci trebuie să căutați cea mai universală soluție. Primul lucru care vine imediat la minte este de a organiza descărcarea fișierului font pe computerul utilizatorului și afișați textul selectat. În comparație cu alte metode, cum ar fi afișarea textului prin imagine, această metodă este cea mai ușoară și cea mai universală.

Ce avantaje în cele din urmă ne oferă descărcarea fișierului de font cu utilizare ulterioară prin CSS.

• Textul este ușor de adăugat și editat.
• În browser vă puteți bucura de căutarea și găsiți frazele dorite.
• În setările browserului, puteți reduce sau mări dimensiunea fontului care realizează o vizionare confortabilă.
• Motoarele de căutare Indicați conținutul documentului.
• Textul poate fi evidențiat și copiat la tampon, precum și la traducerea în altă limbă.
• Parametrii de text ca o distanță de ariera, culori, dimensiuni și altele asemenea ușor de schimbat utilizând proprietățile CSS.
• În text, din nou prin CSS, adăugați pur și simplu efecte diferite, cum ar fi umbra.

După cum puteți vedea, multe avantaje. Dezavantajele mici sunt, de asemenea, disponibile și pentru balanțele pe care trebuie menționate.

• Nu toate versiunile de browsere acceptă fontul încărcăbil și unul pentru tot format.
• Un fișier care conține un set cu cască font poate ocupa un volum mare, încetinind astfel descărcarea paginii web.

În fila. 1 Listează versiunile browserului și formatele de fonturi pe care le acceptă.

Masa. 1. Formatele acceptate

Format	Internet Explorer.	Crom.	Operă.	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+

Formatul cel mai acceptat este TTF. Cu excepția IE la versiunea 9.0 și IOS, toate browserele o înțeleg perfect. Deci, dacă aveți un font în acest format și vă concentrați pe browserele moderne, nu trebuie să faceți acțiuni suplimentare. Suficient în stiluri pentru a scrie următorul cod (Exemplul 1).

Exemplul 1. Conectarea TTF

HTML5 CSS3 IE 8 IE 9+ CR OP SA FX

Inițial, încărcați fișierul de font în sine utilizând regula @ Font-Face. În interiorul acestuia, scriem titlul setului de cască al fontului prin parametrul Font-Family și calea către fișier prin SRC. Utilizați în continuare fontul ca de obicei. Deci, dacă trebuie să setăm fontul de titlu, atunci pentru selectorul H1, așa cum se arată în exemplul, specificați proprietatea Font-Family cu numele fontului încărcat. Pentru versiunile vechi ale IE prin virgule, lista opțiuni de rezervă. În acest caz, fontul titlului va fi "comic Sans MS", deoarece IE8 și nu acceptă formatul TTF.

Rezultatul acestui exemplu este prezentat în fig. unu.

Smochin. 1. Titlu cu font descărcat

Ce ar trebui să fac dacă aveți nevoie de un font frumos în IE8? Din fericire, @ Font-Face vă permite să conectați mai multe fișiere de fonturi diferite în același timp. Browserul rămâne doar pentru a alege cel adecvat. Astfel, o soluție universală care funcționează în toate browserele este redusă la convertirea formularului TTF disponibil la eot cu conexiunea ulterioară a ambelor fișiere.

Există mai multe servicii online pentru conversie care vă permit să descărcați fișierul TTF și să obțineți un fișier eot la ieșire. Din păcate, majoritatea acestor servicii au aceeași problemă - dosarul pe care îl obținem, dar limba rusă nu este acceptată în ea. Ca rezultat, rezultatul dorit nu este atins, conversia are loc incorect. Printre siturile dovedite, am fost singur care a arătat textul în adică corect.

Accesați acest site, încărcați fișierul TTF și apăsați butonul "Conversia TTF la eot", după care salvați fișierul rezultat în dosarul cu fonturi. Stilurile au rămas un mic truc și fac browsere diferite încărcate fontul în formatul dorit. Pentru a face acest lucru, adăugați doi parametri SRC. Primul indică fișierul eot și este conceput pentru versiuni mai vechi ale IE. Al doilea parametru SRC trebuie să conțină două adrese enumerate prin virgulă, una dintre ele indică fișierul TTF. Faptul este că versiunea 8.0 și mai mică nu înțelege virgulă în parametrul SRC și, în consecință, va ignora întregul parametru. Opțiunile de scriere pot fi mai multe, de exemplu, repetați adresa URL, specificați numele fontului din interiorul parametrului local sau pentru a scrie un font inexistent. Dacă browserul nu poate încărca un astfel de font, acesta se va întoarce la al doilea din listă și este scris cu noi corect. Modalități permise de scriere.

sRC: URL (Fonts / Pompadur.ttf), URL (Fonts / Pompadur.ttf);
SRC: Local (Pompadur), URL (Fonts / Pompadur.ttf);
SRC: Local ("BLA BLA"), URL (Fonts / Pompadur.ttf);

Opțiunea de conectare a fontului pentru toate versiunile de browsere este prezentată în Exemplul 2.

Exemplul 2. Conectați eot

HTML5 CSS3 adică CR OP SA FX

Elementul modern al procesului politic

De fapt, învățăturile politice ale Montesquieu conduc la tipul continental-european de cultură politică, care sa reflectat în lucrările lui Michels.

În ceea ce privește iOS, faceți și descărcați un font separat în format SVG, așa cum mi se pare că nu există nici un sens special. Publicul de site-uri care o vizualizează prin IOS este încă mic, în plus, versiunea site-ului sub dispozitive mobile încearcă să scape și să încarce mai multe zeci de kilobytes nu este de dorit.

Fonturile Google Web.

Serviciu convenabil care a învățat rutina pentru a susține diferite formate de fonturi și versiuni de browser, veți găsi la www.google.com/webfonts. . Deși colecția este relativ puține fonturi diferite (cele mai multe duzini), toate sunt selectate foarte de înaltă calitate și sunt libere să se utilizeze pe site-uri.

Înainte de a selecta fontul, comutați valoarea scriptului la chirilică, atunci veți vedea o listă de fonturi care sprijină limba rusă (figura 2).

Smochin. 2. Selectarea fonturilor în Fonturile Google Web

Font vă place să pre-adăugați la colecție făcând clic pe butonul "Adăugare la colectare", apoi pe butonul "Utilizare" din colțul din dreapta jos al ecranului. Pe pagina următoare (figura 3) puteți alege în cele din urmă fonturile de care aveți nevoie. Trebuie să se înțeleagă că setul cu cască al fontului poate conține mai multe remize și fiecare dintre ele mărește volumul fișierelor descărcate.

Smochin. 3. Fonturi descărcabile

Puteți conecta fonturile selectate cu una din cele trei moduri, codul adăugat poate fi copiat mai jos pe pagină.

1. Prin element . Șirul va avea despre formularul de mai jos.

2. Prin regula @import. Introduceți un astfel de șir la fișierul dvs. CSS la început.

@Import URL (http://fonts.googleapis.com/css?family\u003dphilosopher&subset\u003dcyrillic);

3. prin JavaScript.

În principiu, toate căile sunt echivalente, deci alegeți în preferința dvs.

Avantajele aplicării acestui serviciu sunt.

• Fonturile sunt gratuite pentru utilizare, nu trebuie să plătiți pentru ei.
• Fonturile propuse sunt "ascuțite" pentru a vizualiza pe ecran, fișierele sunt optimizate și ocupă un volum relativ mic.
• Browserul este determinat automat și fontul este emis sub el în formatul dorit.

Unul dintre principalele avantaje ale serviciului este că fonturile sunt stocate în formate TTF, EOT, WOFF, SVG și sunt încărcate după verificarea browserului. Astfel, formatul eot va fi disponibil numai pentru versiunile vechi de Ie.

Utilizați Fonturile Google Web sau nu pentru a vă rezolva. Dacă nu ați găsit un font adecvat acolo, puteți conecta întotdeauna un TTF popular și comun. Mai mult decât atât, este susținut de cele mai recente versiuni ale tuturor browserelor populare.

Fontul joacă departe de cel mai recent rol în proiectarea site-ului, poate accentua stilul comun, ajută utilizatorul să fie orientat spre conținut de text. Căutați fonturi gratuite, apoi conectați o grămadă de fișiere pentru diferite browsere - nu este recunoscător, dar există o ieșire - fonturi de la Google Fonturi.

Căutați un font adecvat de la Fonturile Google

Să mergem la serviciul de fonturi de la Google și să ne întrebăm capacitățile.

În panoul din stânga (lateral), puteți configura parametrii de filtrare a fontului și, cel mai important, alegeți apartenența la chirilică sau latină.
În partea de sus, puteți schimba afișarea textului demo, sub formă: cuvinte, sugestii, paragraf, poster. Modificați dimensiunea fontului și introduceți textul în locul unei opțiuni demo.

Conectarea fonturilor de la Fonturile Google

După ce ați selectat fontul dorit, faceți clic pe butonul "Utilizare rapidă" (vezi imaginea de mai jos)

Pe pagina de conectare font, trebuie să selectați:

1. Stiluri de fonturi, grăsime, italic etc. Nu accelerați din greu, alegeți numai cele mai necesare, deoarece Toate acestea afectează viteza de încărcare a fontului și, în consecință, viteza de descărcare a textului de pe site-ul dvs. Urmați indicatorii senzorului din dreapta (paragraful 5 din imagine)
2. Alegeți ce caractere aveți nevoie în acest font (în cea mai mare parte latină și chirilică).
3. Copiați codul de etichetă de legătură în blocul capului
4. Folosiți stilul fontului în stiluri, așa cum se arată în paragraful 4 (consultați Makartinka)