Ez a blog a CSS @font-face szabály használatáról fog szólni.
Mi az a CSS @font-face szabály?
A CSS @font-face szabályát arra használjuk, hogy egyedi betűtípusokat készítsünk projektjeinkhez. Ezek a betűtípusok betölthetők a szerverről vagy a rendszer telepített betűtípusairól.
Hogyan kell használni a CSS @font-face szabályt?
A CSS @font-face szabály használatának szintaxisa az alábbiakban található:
@font-face {
betűtípus család : MyNewFont ;
src : url ( )
}
A @font-face szabályt úgy határozzák meg, hogy src attribútumként adunk meg egy értéket a font-family tulajdonságban és a kapcsolódó URL-t, ahonnan ez a betűtípus található.
Példa
Az alábbi példában testre szabjuk a betűtípusokat. Ehhez először töltse le a betűtípusokat a böngészőből, és adja hozzá őket a projekt mappájához. Hivatkozásokat is használhat, ha a szerverről származó betűtípusokat használ.
Először adjon hozzá
és címkéket, majd alkalmazza a betűtípusok testreszabásához mindegyikhez. Valósítsuk meg a fent leírt forgatókönyvet három lépésben.
1. lépés: Adjon hozzá elemeket a HTML-fájlhoz
1. lépés: Adjon hozzá elemeket a HTML-fájlhoz
A HTML-ben a
szakaszban adja hozzá a és a karakterláncot, hogy hozzáadjon néhány, a weboldalhoz kapcsolódó tartalmat:
< h2 > Üdvözöljük a Linuxhintben! < / h2 >
< h1 > Üdvözöljük a Linuxhintben! < / h1 >
2. lépés: Adja meg a @font-face szabályt a CSS-ben
< h2 > Üdvözöljük a Linuxhintben! < / h2 >
< h1 > Üdvözöljük a Linuxhintben! < / h1 >
2. lépés: Adja meg a @font-face szabályt a CSS-ben
A szabály megadásához a „ @font-face ” a CSS-ben használatos. A göndör zárójelben adja hozzá a font-family tulajdonságot, és adja hozzá a betűtípus nevét értékként. Ezután az src tulajdonság segítségével adja meg a letöltött betűtípus URL-címét:
@font-face {
betűtípus család : a fontom ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Hasonlóképpen hozzáadunk egy másik testreszabott betűtípus blokkot:
@font-face {betűtípus család : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Most alkalmazza a stílust a
és a elemekre.
Stílus h2 elem
h2 {
betűtípus család : a fontom ;
betűméret : 50 képpont ;
}
Stílus h2 elem
h2 {betűtípus család : a fontom ;
betűméret : 50 képpont ;
}
A
elemre alkalmazott tulajdonságok leírása az alábbiakban olvasható:
- ' betűtípus család ” értékkel van beállítva a fontom ” amit a @font-face szabályban deklaráltunk.
- ' betűméret ” tulajdonság 50 képpontra állítja a betűméretet.
Stílus h1 elem
h1 {
betűtípus család : myfont2 ;
betűméret : 70 képpont ;
szín : barna ;
}
Itt a ' szín ” tulajdonságot használják a betűtípus színezésére.
Az alábbi képen látható, hogy a
és címkék stílusa sikeresen megtörtént az újonnan deklarált betűtípusokkal:
Megadtuk a CSS @font-face szabály használatának módszerét.
Következtetés
A betűstílusok fontos szerepet játszanak abban, hogy bármely alkalmazás esztétikus legyen. Rendszerünk korlátozott betűstílusokkal rendelkezik, míg a fejlesztőknek különböző betűtípusokra van szükségük, hogy szebbé tegyék webalkalmazásaikat. Ehhez a CSS lehetővé teszi, hogy a @font-face szabályt használjuk egyéni betűtípusok hozzáadásához. Ez a cikk bemutatja a @font-face szabályt, amellyel testreszabhatja a betűstílust az alkalmazásunkban.