Aquest bloc parlarà de l'ús de la regla CSS @font-face.
Què és la regla CSS @font-face?
La regla @font-face en CSS s'utilitza per fer tipus de lletra personalitzats per als nostres projectes. Aquests tipus de lletra es poden carregar des del servidor o dels tipus de lletra instal·lats del sistema.
Com utilitzar la regla CSS @font-face?
La sintaxi per utilitzar la regla CSS @font-face s'esmenta a continuació:
@font-face {
família de tipus de lletra : La meva font nova ;
src : url ( )
}
La regla @font-face es defineix especificant un valor a la propietat font-family i l'URL relacionat des d'on es troba aquesta font com a atribut src.
Exemple
A l'exemple següent, personalitzarem els tipus de lletra. Per fer-ho, primer, descarregueu els tipus de lletra des del navegador i afegiu-los a la carpeta del vostre projecte. També podeu utilitzar enllaços si feu servir tipus de lletra del servidor.
En primer lloc, afegiu etiquetes
i i, a continuació, apliqueu-los per personalitzar els tipus de lletra a cadascun d'ells. Implementem l'escenari descrit anteriorment en tres passos.
Pas 1: afegiu elements al fitxer HTML
Pas 1: afegiu elements al fitxer HTML
En HTML, dins de la secció
, afegiu i per afegir contingut relacionat amb la pàgina web:
< h2 > Benvingut a Linuxhint! < / h2 >
< h1 > Benvingut a Linuxhint! < / h1 >
Pas 2: especifiqueu la regla @font-face en CSS
< h2 > Benvingut a Linuxhint! < / h2 >
< h1 > Benvingut a Linuxhint! < / h1 >
Pas 2: especifiqueu la regla @font-face en CSS
Per especificar la regla, la paraula clau ' @font-face ” s'utilitza en CSS. Dins dels seus claudàtors, afegiu la propietat font-family i afegiu el nom de la font com a valor. A continuació, utilitzeu la propietat src per especificar la ruta de l'URL del tipus de lletra baixat:
@font-face {
família de tipus de lletra : la meva font ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
De la mateixa manera, afegirem un altre bloc de lletra personalitzat:
@font-face {família de tipus de lletra : la meva font2 ;
src : url ( '/fonts/Olive_Vine\DEMO.otf' ) ;
}
Ara, apliqueu l'estil als elements
i .
Element estil h2
h2 {
família de tipus de lletra : la meva font ;
mida de la font : 50 píxels ;
}
Element estil h2
h2 {família de tipus de lletra : la meva font ;
mida de la font : 50 píxels ;
}
Les propietats aplicades a l'element
s'expliquen a continuació:
- “ família de tipus de lletra ' s'estableix amb el valor ' la meva font ” que és el que hem declarat a la regla @font-face.
- “ mida de la font ” estableix la mida del tipus de lletra a 50 px.
Element d'estil h1
h1 {
família de tipus de lletra : la meva font2 ;
mida de la font : 70 píxels ;
color : marró ;
}
Aquí el ' color ” s'utilitza per acolorir el tipus de lletra.
Es pot veure a la imatge que es proporciona a continuació que les etiquetes
i s'han dissenyat correctament amb les fonts recentment declarades:
Hem proporcionat el mètode per utilitzar la regla CSS @font-face.
Conclusió
Els estils de lletra tenen un paper important per fer que qualsevol aplicació sigui atractiva estèticament. El nostre sistema té estils de lletra limitats, mentre que un desenvolupador necessita diferents tipus de lletra per afegir embelliment a les seves aplicacions web. Per fer-ho, CSS ens permet utilitzar la regla @font-face per afegir fonts personalitzades. Aquest article ha demostrat la regla @font-face mitjançant la qual podeu personalitzar l'estil de la font a la nostra aplicació.