Conectarea fonturilor terță parte la site, proiectarea și dezvoltarea site-ului

Conectarea fonturilor terță parte la site, proiectarea și dezvoltarea site-ului

Timp bun 🙂
Astăzi am decis să vă spun despre un mic, bine, foarte util pentru o anumită funcție. Dacă aveți un site web, probabil că ați crezut că ați făcut mai plăcut pentru ochii utilizatorului. Unul dintre factorii importanți care afectează aspectul este fontul. Frecvent, sunt utilizate fonturi standard, care sunt acceptate de browsere, dar uneori vreau să evidențiez site-ul meu, deci este necesar să conectați fonturi terțe.







Deci, aveți un site web și v-ați întrebat cum să conectați fonturile la acesta. Apropo, dacă sunteți interesat în problema înregistrării domeniului și sunteți serios gândesc cum să ajungă la site-ul, cred că va fi interesat pentru a citi articolul - Cum de a înregistra un domeniu. Deci, ce ai nevoie pentru a face legătura?

1. Găsiți fontul

2. Formatul fontului

Cele mai multe ori, fonturile sunt în format TTF. Acest format utilizează ferestrele sistemului de operare. Primul browser pe care îl înțelege pe Firefox. Dar pentru ca toate browserele să fie afișate corect, fontul trebuie să fie în mai multe extensii. Pentru a afla ce extensii sunt acceptate de diferite browsere.

3. Conectarea fontului

Puteți conecta un font în două moduri.

  • 1. Conectați fontul prin plasarea acestuia pe site-ul dvs. web.
  • 2. Conectați fontul de la un serviciu terță parte.

    Și deci ia în considerare prima metodă. Trebuie să căutați imediat fonturile care vin împreună cu extensii diferite. Dacă vă place fontul și merge numai în format TTF, puteți utiliza serviciul pentru a genera fonturile.







    Mai întâi, creați un dosar pe site - în tema site-ului, șablon sau doar la rădăcină. Să o numim font exemplu. Acolo trebuie să puneți fișierele cu extensii diferite, așa cum este descris mai sus. De exemplu, folosim fontul helioscond-webfont. Ar trebui să existe trei fișiere în dosar.

    • helioscond-webfont.eot
    • helioscond-webfont.ttf
    • helioscond-webfont.woff

    Și pentru a conecta fontul, trebuie să scrieți liniile de cod în fișierul de stil. de multe ori este un fișier stil.css. Dacă aveți alta, apoi în ea. În partea de sus, adăugați următoarele

    Dacă descărcați fișierul terminat cu toate formatele sau folosind un generator care va da, același fișier, nu va fi în fișierul cu stilurile, dar dacă nu? utilizați ca în exemplu, schimbând numele și calea.

    În al doilea rând, setați numele fontului și apoi dacă la orice clasă sau id specificați un stil folosind acest font, scrieți pur și simplu această linie cu numele fontului.
    exemplu:

    Înainte vine conexiunea fiecărui fișier cu o altă extensie, astfel încât toate browserele să înțeleagă ceea ce vor, ca să spunem așa, să setăm compatibilitatea cu browserul încrucișat.
    La sfârșit, specificați stilul fontului. În acest caz, acest lucru este normal. Există, de asemenea, - îndrăznețe și ușoare sau regulate. Dacă aveți toate sau mai multe, atunci pentru toată lumea este prescris în mod repetat. Acordați atenție, de asemenea, drumului. Fontul dosarului meu se află în același director ca și foaia de stil, deci în calea stilurilor

    Dacă aveți o altă cale, atunci specificați-o corect.
    Astfel, fontul care este pe site-ul dvs. va fi conectat.

    A doua modalitate este să conectați fontul de la un serviciu terț. Pentru un exemplu, alegeți fonturile Google, care pot fi găsite aici - google.com/webfonts

    Conectarea cu un serviciu terț, implementat și în trei moduri.

    Mai întâi prin elementul de legătură din antetul site-ului dvs. înainte de eticheta capului de închidere. Linia va avea aproximativ următoarea formă.

    A doua opțiune este prin regula @import. Am inserat această linie în fișierul nostru CSS chiar în partea de sus.

    În stiluri pentru o clasă sau un idi, specificați - font-family: 'Cuprum', sans-serif; În exemplul nostru, acesta este fontul Cuprum.

    Modul de conectare a fonturilor prin intermediul unui serviciu terț are avantajele sale

    Acum știți cum să conectați un font de terță parte la site-ul dvs. În ce fel, decideți.

    Asta e tot. Vă mulțumesc pentru atenție

    Dacă ai putea folosi munca mea, poți susține site-ul :)

    Bună dragă prietenă

    Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă și, prin urmare, contribuiți la dezvoltarea acestuia. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră







    Trimiteți-le prietenilor: