Questo blog parlerà dell'uso della regola CSS @font-face.
Cos'è la regola CSS @font-face?
La regola @font-face nei CSS viene utilizzata per creare caratteri personalizzati per i nostri progetti. Questi font possono essere caricati dal server o dai font installati nel sistema.
Come usare la regola CSS @font-face?
La sintassi per utilizzare la regola CSS @font-face è indicata di seguito:
@font-face {
famiglia di font : MyNewFont ;
src : URL ( )
}
La regola @font-face viene definita specificando un valore nella proprietà font-family e l'URL correlato da cui si trova questo font come attributo src.
Esempio
Nell'esempio seguente, personalizzeremo i caratteri. Per fare ciò, prima scarica i font dal browser e aggiungili alla cartella del tuo progetto. Puoi anche utilizzare i collegamenti se stai utilizzando i caratteri dal server.
Innanzitutto, aggiungi i tag
e , quindi applica per personalizzare i caratteri a ciascuno di essi. Implementiamo lo scenario sopra descritto in tre passaggi.
Passaggio 1: aggiungi elementi al file HTML
Passaggio 1: aggiungi elementi al file HTML
In HTML, all'interno della sezione
, aggiungi e per aggiungere alcuni contenuti relativi alla pagina web:
< h2 > Benvenuto su Linuxhint! < / h2 >
< h1 > Benvenuto su Linuxhint! < / h1 >
Passaggio 2: specificare la regola @font-face in CSS
< h2 > Benvenuto su Linuxhint! < / h2 >
< h1 > Benvenuto su Linuxhint! < / h1 >
Passaggio 2: specificare la regola @font-face in CSS
Per specificare la regola, la parola chiave ' @font-face ” è utilizzato nei CSS. All'interno delle parentesi graffe, aggiungi la proprietà font-family e aggiungi il nome del carattere come valore. Quindi, utilizza la proprietà src per specificare il percorso URL del font scaricato:
@font-face {
famiglia di font : myfont ;
src : URL ( '/fonts/Batuphat\Script.otf' ) ;
}
Allo stesso modo, aggiungeremo un altro blocco di font personalizzato:
@font-face {famiglia di font : myfont2 ;
src : URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Ora applica lo stile agli elementi
e .
Stile h2 Elemento
h2 {
famiglia di font : myfont ;
dimensione del font : 50 pixel ;
}
Stile h2 Elemento
h2 {famiglia di font : myfont ;
dimensione del font : 50 pixel ;
}
Le proprietà applicate all'elemento
sono spiegate di seguito:
- “ famiglia di font ” è impostato con il valore “ myfont ” che è ciò che abbiamo dichiarato nella regola @font-face.
- “ dimensione del font ” imposta la dimensione del font a 50px.
Stile h1 Elemento
h1 {
famiglia di font : myfont2 ;
dimensione del font : 70 pixel ;
colore : Marrone ;
}
Qui il “ colore La proprietà ” viene utilizzata per colorare il carattere.
Si può vedere dall'immagine fornita di seguito che i tag
e sono stilizzati correttamente con i font appena dichiarati:
Abbiamo fornito il metodo per utilizzare la regola CSS @font-face.
Conclusione
Gli stili dei caratteri svolgono un ruolo importante nel rendere esteticamente accattivante qualsiasi applicazione. Il nostro sistema ha stili di carattere limitati, mentre uno sviluppatore ha bisogno di caratteri diversi per abbellire le proprie app web. Per fare ciò, i CSS ci consentono di utilizzare la regola @font-face per aggiungere caratteri personalizzati. Questo articolo ha dimostrato la regola @font-face attraverso la quale è possibile personalizzare lo stile del carattere nella nostra applicazione.