Acest blog va vorbi despre utilizarea regulii CSS @font-face.
Ce este regula CSS @font-face?
Regula @font-face în CSS este utilizată pentru a crea fonturi personalizate pentru proiectele noastre. Aceste fonturi pot fi încărcate de pe server sau din fonturile instalate de sistem.
Cum se utilizează regula CSS @font-face?
Sintaxa de utilizare a regulii CSS @font-face este menționată mai jos:
@font-face {
familie de fonturi : MyNewFont ;
src : url ( )
}
Regula @font-face este definită prin specificarea unei valori în proprietatea font-family și a adresei URL aferente de unde se află acest font ca atribut src.
Exemplu
În exemplul de mai jos, vom personaliza fonturile. Pentru a face acest lucru, mai întâi, descărcați fonturile din browser și adăugați-le în folderul proiectului dvs. De asemenea, puteți utiliza link-uri dacă utilizați fonturi de pe server.
În primul rând, adăugați etichete
și , apoi aplicați pentru a personaliza fonturile pentru fiecare dintre ele. Să implementăm scenariul descris mai sus în trei pași.
Pasul 1: Adăugați elemente la fișierul HTML
Pasul 1: Adăugați elemente la fișierul HTML
În HTML, în secțiunea
, adăugați și pentru a adăuga conținut legat de pagina web:
< h2 > Bun venit la Linuxhint! < / h2 >
< h1 > Bun venit la Linuxhint! < / h1 >
Pasul 2: Specificați regula @font-face în CSS
< h2 > Bun venit la Linuxhint! < / h2 >
< h1 > Bun venit la Linuxhint! < / h1 >
Pasul 2: Specificați regula @font-face în CSS
Pentru a specifica regula, cuvântul cheie „ @font-face ” este utilizat în CSS. În parantezele sale, adăugați proprietatea font-family și adăugați numele fontului ca valoare. Apoi, utilizați proprietatea src pentru a specifica calea URL a fontului descărcat:
@font-face {
familie de fonturi : myfont ;
src : url ( „/fonts/Batuphat\ Script.otf” ) ;
}
În mod similar, vom adăuga un alt bloc de fonturi personalizate:
@font-face {familie de fonturi : myfont2 ;
src : url ( „/fonts/Olive_Vine\ DEMO.otf” ) ;
}
Acum, aplicați stilul elementelor
și .
Stil h2 Element
h2 {
familie de fonturi : myfont ;
marimea fontului : 50px ;
}
Stil h2 Element
h2 {familie de fonturi : myfont ;
marimea fontului : 50px ;
}
Proprietățile aplicate elementului
sunt explicate mai jos:
- „ familie de fonturi ” este setat cu valoarea “ myfont ” care este ceea ce am declarat în regula @font-face.
- „ marimea fontului ” proprietate setează dimensiunea fontului la 50px.
Stil h1 Element
h1 {
familie de fonturi : myfont2 ;
marimea fontului : 70px ;
culoare : maro ;
}
Aici ' culoare ” proprietatea este folosită pentru a colora fontul.
Din imaginea de mai jos se poate observa că etichetele
și sunt stilate cu succes cu fonturile nou declarate:
Am furnizat metoda de utilizare a regulii CSS @font-face.
Concluzie
Stilurile de font joacă un rol important în a face orice aplicație atractivă din punct de vedere estetic. Sistemul nostru are stiluri limitate de fonturi, în timp ce un dezvoltator are nevoie de fonturi diferite pentru a adăuga înfrumusețare aplicațiilor lor web. Pentru a face acest lucru, CSS ne permite să folosim regula @font-face pentru a adăuga fonturi personalizate. Acest articol a demonstrat regula @font-face prin care puteți personaliza stilul fontului în aplicația noastră.