Un carattere è un insieme di caratteri di testo con un certo stile e dimensioni che aggiungono valore all'applicazione. CSS ci consente di fare caratteri personalizzati in base alle nostre esigenze utilizzando il "@Font-Face" regola. Per questo, è necessario scaricare il carattere o fornire un collegamento ai caratteri dal server. Più specificamente, gli sviluppatori hanno bisogno di caratteri diversi per i loro progetti e senza la regola del font-face, il sistema sarà limitato ai caratteri già installati nel nostro sistema.

Questo blog parlerà dell'uso della regola CSS @Font-Face.

Qual è la regola CSS @Font-Face?

La regola @font-face in CSS viene utilizzata per realizzare caratteri personalizzati per i nostri progetti. Questi caratteri possono essere caricati dal server o dai caratteri installati del sistema.

Come utilizzare la regola CSS @Font-Face?

La sintassi per utilizzare la regola CSS @Font-Face è menzionata di seguito:

@font-face
Font-Family: MyNewfont;
src: url ()

La regola del font-face è definita specificando un valore nella proprietà della famiglia del carattere e l'URL correlato da dove si trova questo carattere come attributo SRC.

Esempio

Nell'esempio seguente, personalizzeremo i caratteri. Per fare ciò, prima, scarica i caratteri dal browser e aggiungili alla cartella del progetto. È inoltre possibile utilizzare i collegamenti se si utilizzano caratteri dal server.

In primo luogo, aggiungi

E

tag, quindi applica per personalizzare i caratteri a ciascuno di essi. Implettiamo lo scenario sopra descritto in tre fasi.

Passaggio 1: aggiungi elementi al file HTML

In HTML, all'interno della sezione, aggiungi

E

Per l'aggiunta di alcuni contenuti relativi alla pagina Web:

Benvenuti in Linuxhint!

Benvenuti in Linuxhint!

Passaggio 2: specificare la regola della faccia di font in CSS

Per specificare la regola, la parola chiave "@Font-Face"È utilizzato in CSS. All'interno delle sue staffe ricci, aggiungi la proprietà del carattere e aggiungi il nome del carattere come valore. Quindi, utilizzare la proprietà SRC per specificare il percorso URL del carattere scaricato:

@font-face
Font-Family: Myfont;
SRC: URL ("/Fonts/Batuphat \ Script.otf ");

Allo stesso modo, aggiungeremo un altro blocco di carattere personalizzato:

@font-face
Font-Family: myfont2;
SRC: URL ("/Fonts/Olive_vine \ Demo.otf ");

Ora, applica lo stile al

E

elementi.

Stile Elemento H2

H2
Font-Family: Myfont;
Font-size: 50px;

Le proprietà applicate al file

l'elemento sono spiegati di seguito:

• "famiglia di font"È impostato con il valore"myfont"Che è ciò che abbiamo dichiarato nella regola della faccia di font @.
• "dimensione del font"La proprietà imposta le dimensioni del carattere su 50px.

Stile Elemento H1

H1
Font-Family: myfont2;
Font-size: 70px;
Colore: marrone;

Qui il "colore"La proprietà viene utilizzata per colorare il carattere.

Può essere visto dall'immagine sotto fornita

E

I tag vengono disegnati con successo con i caratteri appena dichiarati:

Abbiamo fornito il metodo per l'utilizzo della regola CSS @Font-Face.

Conclusione

Gli stili di carattere svolgono un ruolo importante nel rendere qualsiasi applicazione esteticamente attraente. Il nostro sistema ha stili di carattere limitati, mentre uno sviluppatore ha bisogno di caratteri diversi per aggiungere abbellimento alle loro app web. Per fare ciò, CSS ci consente di utilizzare la regola @font-face per l'aggiunta di caratteri personalizzati. Questo articolo ha dimostrato la regola @font-face attraverso la quale è possibile personalizzare lo stile dei font nella nostra applicazione.