Cum se conectează fonturile CSS: Instrucțiuni

Dacă sunteți un designer sau un webmaster, atunci, cel mai probabil, știți cum să conectați fonturile CSS. Dacă sunteți proprietarul unui mic blog și decideți să vă decorați resursa și să o faceți unică, atunci aceste cunoștințe ar trebui să vă ajute. Dar este mai bine să începeți încă de la început, să înțelegeți ce foi de stil cascadă, unde să obțineți fonturile și unde să le instalați.

descriere

Deci, răspunsul la modul de conectare a fontului CSS la site trebuie să înceapă cu o descriere a limbajului direct formal. CSS este o foaie de stil cascadă. Această limbă este folosită ca o descriere a aspectului documentului. Funcționează împreună cu limba de marcare.

CSS funcționează pentru a indica caracteristicile vizuale ale paginilor de pe Internet. Acesta din urmă ar trebui să fie creat pe baza limbajelor speciale de marcare HTML sau XHTML.

utilizarea

Cine are nevoie de CSS? Conectați fonturile, setați culorile, aranjați blocuri și așa mai departe pentru webmasteri, programatori, care lucrează la crearea site-ului. Sarcina principală a foilor de stil cascadă este de a împărți vizual structurarea. Adică, dacă HTML formează un bloc solid de text, atunci CSS ajută la "decorarea" condiționată a acestui bloc, selectarea elementelor, atribuirea parametrilor.

Separarea oferă documentului accesibilitate, flexibilitate și capacitate de gestionare. Vă permite să scăpați de elemente de conținut complexe și repetabile.

conexiune

Înainte de a înțelege cum să conectați corect fonturile la CSS, trebuie să înțelegeți modul în care fișele de stil cascadă sunt sincronizate cu fișierul. Regulile lor sunt puse în aplicare în aceeași limbă. Foaia de stil are propriile reguli CSS, pe care le utilizează. Tabelele pot fi într-un document editat vizual sau într-un fișier separat cu extensia. Css. Într-un astfel de fișier, numai comenzile și notele la acestea sunt de obicei localizate.

Astfel, devine clar că puteți conecta foile de stil în mai multe moduri. Luați în considerare mai departe.

metode

Există patru opțiuni care vă vor ajuta să conectați fonturile CSS, să atribuiți o nuanță, să identificați blocurile etc. După cum sa menționat anterior, setul de reguli poate fi într-un fișier scris în HTML. Dar această opțiune nu este plăcută de mulți designeri. Este cauzată de faptul că în întreaga pânză de echipe este dificil să se găsească descrierea parametrilor și să se facă față tuturor. Este mult mai ușor să atribuiți stiluri într-un document separat.

Dacă CSS sunt localizate separat, acestea sunt conectate prin etichetă . Trebuie să fie plasat înăuntru și . În această marcă, trebuie să specificați atributul href, care va afișa adresa în fișier cu CSS.

Dacă comenzile sunt colectate din nou de un fișier separat, le conectăm la documentul web specificând @import. Trebuie scrisă între semne. Imediat după

Următoarele două metode se referă la situația în care CSS este plasat direct în documentul pe care doriți să-l decorați. Foaia de stil în acest caz poate fi între etichete. Și al patrulea mod implică plasarea regulilor în baza uneia dintre etichete, prin atributul de stil. Apoi, regulile vor afecta un parametru separat care se află în limitele unui anumit text.

Primele două metode au marcat aspectul foilor de stil externe, iar al doilea - cele interne.

fonturi

De ce folosesc fonturile în general? Desigur, fiecare proprietar de site își dorește ca resursele sale să arate nu numai frumoase, ci și unice. Vreau să pun pe paginile de elemente speciale care ar putea să iasă în evidență printre toți. De asemenea, adesea observați titluri sau un meniu de ortografie non-standard.

Există multe întrebări în legătură cu acest lucru. Poate că webmasterii au folosit fotografia în Photoshop. Poate că așa a fost cazul lui Flash. Există o opțiune care a folosit jаvascript. Dar, după cum arată practica, prima opțiune este inconfortabilă și lentă, a doua este depășită, iar a treia este prea zamorochenică. Pentru a crea ceva nou și frumos, puteți încerca să conectați fonturile CSS.

proprietăţi

Merită să înțelegem că, în cazul nostru, fonturile nu sunt doar un anumit stil, ci și un set de proprietăți care sunt necesare pentru a controla structura externă un fel de text. Puteți utiliza mai multe opțiuni. Atribuiți un anumit font pentru titlu, paragraf, citat, text corporal, meniu și așa mai departe.

În ciuda faptului că utilizatorul este disponibil o mare varietate de urme, dimensiuni, saturații etc., este important să nu uităm de citire. Este mai bine să evitați o grămadă mare de stiluri diferite. Va fi suficient să aveți două fonturi pe pagină.

familie

Pentru a putea alege stilul de font, utilizați familia de familii de fonturi. Este foarte dificil să înțelegeți fără echivoc dacă există un anumit font pe PC-ul cititorului al resurselor dvs., este mai bine să introduceți toate aceleași tipuri de variante. În acest caz, browserul web va alege cel care se găsește în sistemul utilizatorului.

Această familie are o serie de sensuri. De exemplu, numele de familie este reprezentat de numele familiei de fonturi. Valoarea familiei generice definește primele cinci familii de fonturi.

Familia stilului font este responsabilă pentru selectarea fontului. Acest stil este de asemenea moștenit, la fel ca cel precedent. Printre sensuri este conturul obișnuit sau oblic și italic. Stilul de font-varianta este responsabil pentru literele mici. Pentru saturație, utilizați font-weight, etc. Font-ului i se poate atribui o dimensiune și o culoare.

Soluție nestandardă

În plus față de fonturile standard, puteți utiliza soluții nestandardizate. De obicei, acestea sunt mai unice și, cel mai probabil, nu le veți observa pe site-urile concurenților. Pentru aceasta nu trebuie să utilizați imagini, jаvascript și flash. Este suficient să luați regula @ font-face. Acesta permite utilizatorului să încarce un fișier extern în document.

Această metodă vă permite să conectați fontul CSS OTF și TTF. Acestea sunt formate speciale care funcționează bine cu sarcini similare. Problemele pot apărea numai cu browserul Internet Explorer. În ciuda faptului că a început să utilizeze fonturi terțe în 1997, el stabilește acum cerințe stricte.

El face multe pentru a vă distruge munca. Acesta poate comprima adesea un fișier de fonturi, uneori poate fi criptat. Prin urmare, există tot felul de hacuri.

formate

Acum există mai multe formate de fonturi pe care trebuie să le cunoașteți. În caz contrar, veți întâlni o serie de neconcordanțe și incompatibilități. Puteți conecta fontul CSS TTF. Acest format este acum acceptat de toate browserele web. O excepție poate fi browserul Internet Explorer versiunea 8 și mai jos, precum și Opera Mini 5.0-8.0.

Cu EOT, numai IE poate funcționa. Situația cu WOFF este aceeași ca și cu TTF. Funcțiile SVG funcționează în browserele Chrome cu până la 37 de versiuni, precum și în Safari, iOS Safari, Browser Android. După cum arată practica, este mai bine să folosiți TTF. Aceasta este cea mai universală opțiune, care rareori cauzează probleme. El este cel mai comun.

regulă

Deci, pentru a conecta fontul unuia dintre formatele de mai sus, este suficient să folosiți regula @ font-face, pe care am menționat-o mai devreme. Pentru a fi clar, trebuie să urmați un anumit algoritm. Aveți un fișier de font font.ttf. Pentru a le utiliza pentru textul principal, trebuie mai întâi să copiați fișierul în folderul unde sunt localizate toate fișierele site-ului.

Dacă doriți să utilizați mai multe fonturi, puteți crea un folder special în care să le încărcați. Deci este mult mai ușor să le găsiți și să schimbați conținutul unui astfel de dosar.

Acum trebuie să ne asigurăm că browserul încarcă automat fontul nostru. Pentru a face asta, trebuie să-i dați instrucțiuni. Folosim directiva @ font-face. Echipa noastră va arăta astfel:

@ font-face {

font-familie: MyUniqueFont;

src: url (`fonturi / font.ttf`);

}

Comanda font-familie este responsabilă pentru fontă pentru a obține numele său și după ce poate fi folosit în scrierea stilului. În al doilea rând există o indicație a căii prin care browserul ar trebui să găsească stilul și să îl conecteze. Aceasta nu este o adresă universală. În funcție de locul în care ați pus fișierul de fonturi, acest lucru va diferi de asemenea. Deci veți învăța cum să conectați un font CSS dintr-un dosar.

Conexiuni

Dacă nu știți cum să conectați mai multe fonturi CSS, există și o instrucțiune în acest sens. Acesta vă permite să specificați mai multe fișiere simultan. De exemplu, ele pot fi conectate dintr-o duzină. Pentru aceasta, trebuie să utilizați regula de mai sus @ font-face. Urmând exemplul cum ați conectat anterior un fișier dintr-un dosar, în același mod dintr-o linie nouă, specificați linkuri către alte variante de fonturi.

Dacă site-ul dvs. este construit pe baza WordPress, conectarea stilurilor este și mai ușoară. Când trebuie să înlocuiți conturul titlului, trebuie doar să vă conectați la panoul de administrare. Acolo, căutați "Setări tematice". În secțiunea "Tipografie" va fi o listă întreagă de diferite opțiuni. Trebuie doar să selectați și să salvați modificarea.

Alte opțiuni

Foarte des pentru a conecta fonturile utilizați serviciul Google Fonts. Acesta este un instrument popular pentru selectarea și conectarea stilurilor. Există un număr mare de seturi de fonturi. Pentru a le conecta, accesați site-ul oficial.

Înainte de a fi o listă întreagă de exemple și oportunitatea de a experimenta. După ce adăugați stilul dorit, nu uitați să selectați limba chirilică dacă resursa dvs. este în limba rusă. Apoi, puteți alege dimensiunea, stilul sau puteți alege mai multe opțiuni pentru toate ocaziile.

După ce aveți codul pregătit pentru a fi instalat în fișierul CSS. În acest caz, se aplică, de asemenea, regula privind metodele de adăugare. De exemplu, dacă foile de stil sunt reprezentate de un document separat, atunci comanda este trimisă la primul rând. Dacă foile de stil pe care le aveți sunt direct în fișierul HTML, atunci trebuie să-l adăugați în corpul etichetelor.

constatări

Adăugarea de noi fonturi pe site-ul dvs. nu este dificilă. Este important să decideți imediat cu metode și opțiuni. În funcție de sistemul pe care este amplasat site-ul dvs., trebuie să vă gândiți la aceste acțiuni. Dacă aveți o resursă publicată în mod automat, nu există multe opțiuni. Dacă, de exemplu, pe WordPress, atunci această operație este mult mai ușoară decât pare.