Vlad Merzhevich

Fontul este o parte integrantă a designului web, conferă site-ului expresivitate și recunoaștere, exprimă stilul caracteristic al site-ului și este direct legat de percepția textelor. Este posibil ca un font bine ales să nu fie observat, dar fără acesta nu va exista nicio poftă care să completeze designul site-ului web.

Dacă aveți deja un anumit font instalat pe computer, atunci în stiluri este suficient să adăugați o linie.

h1 (font-family: SuperPuperFont;)

Valoarea proprietății familiei de fonturi este numele fontului, va fi aplicată tuturor rubricilor

... Dar ce vor vedea vizitatorii site-ului dacă nu au instalat fontul nostru spectaculos și rar? Această situație este cel mai probabil, deci dacă browserul nu recunoaște fontul declarat, va folosi fontul implicit, de exemplu, în Windows este Times New Roman. Toate design-urile noastre atent gândite se vor prăbuși peste noapte, așa că trebuie să căutăm cea mai versatilă soluție. Primul lucru care îmi vine imediat în minte este să organizezi descărcarea fișierului font pe computerul utilizatorului și să afișezi textul în fontul selectat. În comparație cu alte metode, cum ar fi afișarea textului printr-o imagine, această metodă este cea mai simplă și mai versatilă.

Care sunt avantajele descărcării unui fișier de font și apoi aplicării acestuia prin CSS.

• Textul este ușor de adăugat și editat.
• În browser, puteți utiliza căutarea și găsi frazele dorite.
• În setările browserului, puteți micșora sau mări dimensiunea fontului pentru a obține o vizualizare confortabilă.
• Motoare de căutare indexează bine conținutul documentului.
• Textul poate fi selectat și copiat în clipboard, precum și tradus în altă limbă.
• Parametrii textului, cum ar fi spațierea liniilor, culoarea, dimensiunea și altele asemenea, sunt ușor de modificat folosind proprietățile CSS.
• Din nou, prin CSS, puteți adăuga pur și simplu diferite efecte textului, de exemplu, o umbră.

După cum puteți vedea, există multe avantaje. Există câteva dezavantaje minore și merită menționate pentru echilibru.

• Nu toate versiunile de browser acceptă fontul descărcabil și același format pentru toți.
• Fișierul care conține fontul poate ocupa volum mareîncetinind astfel încărcarea paginii web.

Masa 1 listează versiunile browserului și formatele de font pe care le acceptă.

Tab. 1. Formate 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+

Cel mai acceptat format este TTF. Cu excepția IE până la versiunea 9.0 și iOS, toate browserele o înțeleg perfect. Deci, dacă aveți un font în acest format și vizați browsere moderne, nu este necesară nicio acțiune suplimentară. Este suficient să scrieți următorul cod în stiluri (exemplu 1).

Exemplul 1. Conectarea TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Mai întâi, încărcați fișierul fontului însuși folosind regula @ font-face. În interiorul acestuia, scrieți numele de tipar folosind parametrul font-family și calea către fișier folosind src. Apoi vom folosi fontul ca de obicei. Deci, dacă trebuie să setăm fontul pentru titlu, atunci pentru selectorul h1, așa cum se arată în exemplu, setăm proprietatea familiei de fonturi cu numele fontului încărcat. Pentru versiunile mai vechi ale IE, listăm alternativele separate prin virgulă. V acest caz fontul de titlu va fi „Comic Sans MS”, deoarece IE8 și mai jos nu acceptă formatul TTF.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Antet cu font descărcat

Ce se întâmplă dacă aveți nevoie de un font ornamentat în IE8? Din fericire, @ font-face vă permite să includeți mai multe fișiere de fonturi în același timp. diferite formate... Browserul trebuie doar să o aleagă pe cea potrivită. Astfel, o soluție universală care funcționează în toate browserele se reduce la conversia formatului TTF existent la EOT și apoi la conectarea ambelor fișiere.

Pentru conversie, există mai multe servicii online care vă permit să descărcați un fișier TTF și să obțineți un fișier EOT la ieșire. Din păcate, majoritatea acestor servicii au aceeași problemă - primim fișierul, dar limba rusă nu este acceptată în acesta. Ca urmare, rezultatul dorit nu este atins, conversia este incorectă. Printre site-urile pe care le-am verificat, a fost unul care a arătat corect textul în IE.

Mergeți pe acest site, încărcați fișierul TTF și apăsați butonul „Convertiți TTF în EOT”, după care salvăm fișierul rezultat în folderul cu fonturi. A rămas un mic truc în stiluri pentru a forța diferite browsere să încarce fontul în formatul corect. Pentru a face acest lucru, adăugați doi parametri src. Primul indică fișierul EOT și este pentru versiunile mai vechi ale IE. Al doilea parametru src trebuie să conțină două adrese separate prin virgule, una dintre ele indicând un fișier TTF. Faptul este că IE versiunea 8.0 și anterioare nu înțelege virgula din parametrul src și, în consecință, va ignora în totalitate parametrul. Pot exista mai multe opțiuni de ortografie, de exemplu, repetați adresa URL, specificați numele fontului în parametrul local sau scrieți un font inexistent. Dacă browserul nu poate încărca un astfel de font, atunci va merge la al doilea din listă și îl vom scrie corect. Modalități de scriere acceptabile.

src: url (fonts / pompadur.ttf), url (fonts / pompadur.ttf);
src: local (pompadur), url (fonts / pompadur.ttf);
src: local ("bla bla"), url (fonts / pompadur.ttf);

O opțiune de lucru pentru conectarea unui font pentru toate versiunile de browsere este prezentată în exemplul 2.

Exemplul 2. Conectarea EOT

HTML5 CSS3 IE Cr Op Sa Fx

Un element modern al procesului politic

De fapt, doctrina politică a lui Montesquieu conduce tipul de cultură politică continental-europeană, care s-a reflectat în operele lui Michels.

În ceea ce privește iOS, mi se pare că nu are prea mult rost să creezi și să descarci un font separat în format SVG. Publicul site-urilor care îl navighează prin iOS este încă mic, în plus, versiunea site-ului este sub dispozitive mobileîncearcă să o ușureze și nu este recomandabil să descărcați câteva zeci de kilobyți suplimentari.

Google Web Fonts

Un serviciu convenabil care se ocupă de rutina de acceptare a diferitelor formate de fonturi și a versiunilor browserului poate fi găsit la www.google.com/webfonts... Deși există relativ puține fonturi diferite în colecție (există câteva zeci dintre ele), toate sunt de foarte bună calitate și gratuite pentru utilizare pe site-uri web.

Înainte de a alege un font, comutați valoarea Script la chirilică, apoi veți vedea o listă de fonturi care acceptă limba rusă (Fig. 2).

Orez. 2. Selectarea fonturilor în Google Web Fonts

Fontul care vă place ar trebui mai întâi adăugat la colecție făcând clic pe butonul „Adăugați la colecție”, apoi pe butonul „Utilizați” din colțul din dreapta jos al ecranului. Pe pagina următoare(fig. 3) puteți alege în cele din urmă fonturile dorite. Ar trebui să se înțeleagă că un tipar poate conține mai multe stiluri și fiecare dintre ele mărește volumul fișierelor descărcate.

Orez. 3. Fonturi încărcate pe pagină

Puteți conecta fonturile selectate cu unul dintre în trei moduri, codul adăugat poate fi copiat pe pagină.

1. Prin element ... Linia va arăta ca următoarea.

2. Prin regula @import. Inserăm această linie în fișierul nostru CSS chiar în partea de sus.

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

3. Prin JavaScript.

Practic, toate căile sunt egale, deci alegeți în funcție de preferințe.

Avantajele cererii acest serviciu astfel de.

• Fonturile sunt gratuite, nu trebuie să plătiți pentru ele.
• Fonturile oferite sunt „ascuțite” pentru vizualizare pe ecran, fișierele sunt optimizate și ocupă un volum relativ mic.
• Browserul este detectat automat și este afișat un font în formatul dorit.

Unul dintre principalele avantaje ale serviciului este că fonturile sunt stocate în format TTF, EOT, WOFF, SVG și încărcate după verificarea browserului. Deci, formatul EOT va fi disponibil numai pentru versiunile mai vechi ale IE.

Depinde de dvs. dacă folosiți sau nu Google Web Fonts. Dacă nu ați găsit un font potrivit acolo, puteți conecta oricând popularul și extinsul TTF. Mai mult, este acceptat ultimele versiuni toate browserele populare.

// eco get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // afișează dimensiunea miniaturii mele?>

În acest tutorial vă vom arăta cum să includeți fonturi web în aspect. Fonturile web sunt tipuri de caractere complementare care sunt folosite pentru a face designurile mai unice sau mai variate. Conectarea fontului pe pagină - asigură afișarea corectă a acestuia în toate browserele și nu contează dacă utilizatorul îl are instalat sau nu.

Cum se conectează un font de la Google Fonts

Pasul 1 - alegeți un font

Serviciu Fonturi Google are un set mare de fonturi web care pot fi conectate la un proiect într-o singură linie și utilizate imediat în Stiluri CSS... Pentru a selecta numai fonturile chirilice pentru vizualizare, în filtrul din stânga în parametrul Script, trebuie să selectați valoarea chirilică (pentru chirilică) sau Cirilică extinsă (pentru chirilică extinsă). După aceea, fonturile care acceptă chirilica vor fi afișate în dreapta.

Pentru o utilizare rapidă, faceți clic pe butonul Utilizare rapidă.

Pasul 2 - reglați setările fontului

În pagina următoare alegem ce tipuri de caractere vom folosi. OpenSans are 10 greutăți, de la foarte subțire la foarte îndrăzneț. Cu cât sunt selectate mai multe stiluri, cu atât va afecta mai mult viteza de încărcare a paginii. Prin urmare, merită să conectați numai fonturile utilizate. După aceea, puteți selecta seturi de caractere, pentru Chirilic alegem Chirilic Extins sau Chirilic și Latin.

Pasul 3 - cod pentru conectarea fontului

Apoi luăm o linie de cod pentru a ne conecta la site-ul dvs. Opțiune standard - conectarea unui fișier CSS terță parte din html, în fila @import - va exista un șir pentru conectarea printr-un fișier CSS și o a treia opțiune pentru Javascript. După aceea, conexiunea este gata și puteți utiliza acest tip de caractere în aspect. Blocul de mai jos prezintă un exemplu de accesare a unui font: font-family: "Open Sans", sans-serif;

Setați lățimea folosind parametrul font-weight: 300; sau font-weight: 400; greutate-font: 800; Italic - prin font-style: italic; ...

Exemplu de utilizare

Ca rezultat, dacă am ales să conectăm fontul prin @import în CSS, fișierul nostru CSS va arăta astfel:

/ * Conexiune font * / @import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Definiți stilul pentru titlul h1 * / h1 (/ * Selectați fontul conectat „Deschideți Sans” ca tip * * / font-family: „Deschideți Sans”, sans-serif; / * Selectați dimensiunea fontului 300 , care va corespunde stilului fontului - pentru dimensiuni subțiri * / font-weight: 300;)

Salutări, dragi cititori. Astăzi vom vorbi despre fonturile web Google, despre cum să le descărcăm și să ne conectăm la site.

Accesați site-ul www.google.com/fonts/, în filtrul din dreapta, selectați: 1. categoria dorită, 2. dacă este necesar, sortați-le și 3. selectați limba de care avem nevoie (dacă aveți nevoie de un font rusesc în meniul din stânga, selectați Cyrillik).

Așa că am selectat fontul, acum trebuie să-i selectăm stilul, pentru aceasta, extindeți panoul de mai jos ( Deschideți sertarul de selecție) și accesați fila PERSONALIZAȚIși selectați stilurile și limbile dorite.

Pentru a descărca, faceți clic pe buton descărcați.

Conectarea fontului descărcat

Copiați fonturile conținute în arhivă în folderul / fonts, care ar trebui să fie în același director cu folderul / css al site-ului dvs. HTML.

Conexiune standard a fonturilor descărcate arată așa

@ 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: normal ; font -style: normal;)

În cazul meu, conexiunea va arăta astfel

/ * Cod pentru conectarea unui font în /css/style.css * / @ font-face (font-family: "RobotoRegular"; format url ("../ fonts / RobotoRegular.ttf")) ("truetype"); font - stil: normal; font-weight: normal;)

Pentru a conecta fontul dorit la site, accesați fila ÎNCORPORARE, acolo veți vedea 2 metode de conectare:

1. STANDARD

Acest cod trebuie adăugat la secțiune documentul dvs. HTML.

2. @IMPORT

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

Important. Indiferent de metoda de conectare, utilizați următoarele reguli CSS pentru a defini aceste familii: font-family: ‘Roboto’, sans-serif; mai multe despre acest lucru mai jos.

Bună ziua tuturor! Puteți citi despre ceea ce am scris în lecția 132. Și în acest articol, vă voi spune cum puteți conecta rapid și ușor un font la site-ul dvs. din Google Fonts. În serviciul Google Font, trebuie să alegeți un font pentru site-ul dvs. și apoi să îl conectați.

Nu este necesar să încărcați fișierul fontului în găzduire. Este suficient să scrieți codul HTML necesar în antetul site-ului și în numele noului font. Fonturile pot fi conectate nu numai la un site WordPress, ci și la orice alt site.

Cum să conectați fonturile Google la site-ul dvs.

Mergi la Serviciul Google Font pe acest link și selectați fontul de care avem nevoie.
Fonturile pot fi selectate printr-un filtru. Adică, setăm parametrii și astfel serviciul găsește fonturi cu parametrii selectați.

Puteți seta alți parametri, dacă este necesar: grosime (grosime font), înclinare (italic), lățime (lățime font).

De asemenea, trebuie să selectați alfabetul chirilic dacă site-ul dvs. este în limba rusă: cirilic (chirilic) sau cirilic extins (cirilic extins).

Când parametrii sunt selectați, serviciul va afișa toate fonturile disponibile cu acestea.

Mută ​​cursorul mouse-ului peste fontul pe care dorim să îl instalăm pe site, după care apar setări / parametri suplimentari: Utilizare rapidă ( utilizare rapidă), Pop-out (vizualizați fontul în fereastră separată) și Adăugați la colecție.

Noi alegem " Utilizare rapidă„Și vezi din partea dreapta widget sub formă de vitezometru. Arată cât de repede se încarcă fontul selectat. Cu cât este mai mic numărul de pe acest vitezometru, cu atât mai bine.

Mai jos puteți alege una dintre cele trei opțiuni pentru instalarea fontului pe site: standart, @import sau javascript.

Fiecare opțiune are instrucțiuni pentru limba engleză cum să conectați corect fontul la site. Îți voi arăta prima opțiune " standart„Pentru că este mai simplu.

Copiați linia evidențiată în roșu și apoi lipiți-o în fișierul header.php între etichete ….

Apoi deschideți stilul style.css, găsiți fontul care trebuie schimbat și scrieți unul nou. Scriem doar numele noului font. Puneți Google Fonts între ghilimele, de exemplu, font-family: „Aladin”, Arial, Helvetica, Sans-serif.

Dacă nu ați înțeles nimic deloc, ceea ce v-am spus aici, atunci urmăriți videoclipul unde vă spun în detaliu, Cum se conectează Google Font la site-ul WordPress

______________________
La lecția 204. și fără plugin

Sponsor al materialului.
Aparate de aer condiționat în magazinul online http://www.technodom.kz/catalog/konditsionery. Aer conditionat - cele mai bune bunuri, împrumuturi, selecție imensă, servicii impecabile.

Bună ziua, dragi cititori. Probabil că toți visați să vă faceți site-urile proprii sau ale clientului mai concise și mai atractive.

Unul dintre principalii factori care sunt responsabili de percepția informațiilor de pe site sunt fonturile și modul în care le folosim împreună. Deoarece pe un site, două sau mai multe tipuri de fonturi sunt cele mai des utilizate, de exemplu, pentru titluri și doar pentru textul corpului.

Una dintre posibilitățile de îmbunătățire vizuală a lizibilității textelor este conectarea fonturilor terță parte. La urma urmei, probabil toată lumea știe ce colecție standard „slabă” de fonturi chirilice în Windows, care este responsabilă cu afișarea textului în browser.

Fonturi standard:

Cufon și @ font-face

Anterior am scris deja despre, cu care puteți conecta fonturi non-standard la site. Acum să vedem un mod mai simplu - aceasta este regula @ font-face în CSS și încărcarea fontului în sine din magazinul Google Fonts.

Întreaga diferență dintre Cufon și @ font-face este că primul folosește js pentru a emula fontul și desenează simboluri prin mijloace proprii, în timp ce @ font-face descarcă fontul însuși pe computerul vizitatorului și browserul îl folosește deja pentru a afișa text.

În orice caz, Cufon și @ font-face încetinesc viteza de încărcare a site-ului, deși nu semnificativ.

Utilizarea fonturilor Google pe site

Nu voi picta mult și pentru o lungă perioadă de timp, voi da un exemplu specific de conectare a Google Fonts, folosind acest blog ca exemplu.

După cum puteți vedea, titlurile articolelor și subtitlurile mele sunt într-un font non-standard, așa că acum, în practică, voi arăta cum să faceți acest lucru și îl veți încerca pe site-urile dvs. prin analogie.

Alegerea unui font din depozit

Pentru a nu mă speria, voi explica - un depozit este un depozit, dar în mod burghez :). Și așa, mergem la http://www.google.com/fonts/și căutăm un font potrivit pentru noi înșine:

Nu sunt multe în meniu:
În stânga, după cum puteți vedea, există un bloc cu tot felul de filtre de căutare a fonturilor, în care puteți selecta, de exemplu, numai fonturi latine sau chirilice. Și deasupra, setări pentru afișarea exemplelor, care sunt împărțite în 4 file:

• Cuvânt- afișarea mai multor litere. În acest mod, este convenabil să comparați mai multe fonturi simultan și să vedeți cum arată anumite caractere;
• Sentință- afișare sub forma unei propoziții;
• Paragraf- este afișată o bucată mare de text, care vă va permite să comparați vizual fontul deja în text;
• Poster- sunt afișate titlurile, această metodă de comparație este convenabilă pentru alegerea fontului care va fi utilizat în titluri.

Conectarea fontului la site

După aceea, în panoul Colecție, care se află în partea de jos, accesați fila Utilizare, care este responsabilă pentru utilizarea fonturilor din colecția dvs. Aici veți vedea imediat că Google arată cât de mult se va deteriora viteza de încărcare a paginii:

Mai jos este un panou cu o alegere de „tip de afișare”, selectați latină (latină) și chirilică (chirilică), care ne va oferi posibilitatea de a afișa atât litere latine cât și chirilice:

După aceea, trecem la al treilea element de pe această pagină, și anume conexiunea în sine. Google ne oferă trei opțiuni pentru încorporarea fonturilor lor - prin js, mod standard prin conexiune la și @import în fișier CSS. Folosesc ultima metodă.

Deschideți fișierul CSS și scrieți linia pe care Google ne-a furnizat-o:

Gata, am conectat fontul de la Google Fonts la site, acum cum să-l folosim?

Utilizare în CSS

Totul este destul de simplu, după ce am conectat fontul prin @import, trebuie să ne înregistrăm instruire standard pentru acele clase și indicatori pentru care va fi utilizat noul nostru font. De exemplu:

h1, h2, h3 (font-family: „Cuprum”, sans-serif;)

După toate aceste manipulări, veți avea titluri cu un font nou, non-standard.

Atât, mulțumesc pentru atenție și ne vedem în curând.