Tämä blogi kertoo CSS @font-face -säännön käytöstä.
Mikä on CSS @font-face -sääntö?
CSS:n @font-face -sääntöä käytetään mukautettujen kirjasimien tekemiseen projekteillemme. Nämä fontit voidaan ladata palvelimelta tai järjestelmään asennetuista fonteista.
Kuinka käyttää CSS @font-face -sääntöä?
CSS @font-face -säännön syntaksi mainitaan alla:
@font-face {
font-perhe : MyNewFont ;
src : url ( )
}
@font-face -sääntö määritetään määrittämällä arvo font-family-ominaisuuteen ja siihen liittyvä URL-osoite, josta tämä fontti sijaitsee, src-attribuutiksi.
Esimerkki
Alla olevassa esimerkissä muokkaamme kirjasimia. Lataa ensin fontit selaimesta ja lisää ne projektisi kansioon. Voit myös käyttää linkkejä, jos käytät kirjasimia palvelimelta.
Lisää ensin
- ja -tunnisteet ja käytä sitten mukauttamaan kirjasimia kuhunkin niistä. Toteutetaan yllä kuvattu skenaario kolmivaiheisesti.
Vaihe 1: Lisää elementtejä HTML-tiedostoon
Vaihe 1: Lisää elementtejä HTML-tiedostoon
Lisää HTML:ssä
-osioon ja verkkosivuun liittyvän sisällön lisäämiseksi:
< h2 > Tervetuloa Linuxhintiin! < / h2 >
< h1 > Tervetuloa Linuxhintiin! < / h1 >
Vaihe 2: Määritä @font-face -sääntö CSS:ssä
< h2 > Tervetuloa Linuxhintiin! < / h2 >
< h1 > Tervetuloa Linuxhintiin! < / h1 >
Vaihe 2: Määritä @font-face -sääntö CSS:ssä
Voit määrittää säännön avainsanalla ' @font-face ” käytetään CSS:ssä. Lisää sen kiharaisiin hakasulkeisiin font-family-ominaisuus ja lisää fontin nimi sen arvoksi. Määritä sitten ladatun fontin URL-osoite src-ominaisuuden avulla:
@font-face {
font-perhe : minun fonttini ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Samalla tavalla lisäämme toisen mukautetun kirjasinlohkon:
@font-face {font-perhe : kirjasinni2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Käytä nyt tyyliä
- ja -elementeissä.
Tyyli h2 Element
h2 {
font-perhe : minun fonttini ;
Fonttikoko : 50 pikseliä ;
}
Tyyli h2 Element
h2 {font-perhe : minun fonttini ;
Fonttikoko : 50 pikseliä ;
}
-elementtiin sovellettavat ominaisuudet selitetään alla:
- ' font-perhe ' asetetaan arvolla ' minun fonttini ”, jonka olemme julistaneet @font-face -säännössä.
- ' Fonttikoko ”-ominaisuus asettaa fontin kooksi 50 kuvapistettä.
Tyyli h1 Element
h1 {
font-perhe : kirjasinni2 ;
Fonttikoko : 70 pikseliä ;
väri- : ruskea ;
}
Tässä ' väri- ' -ominaisuutta käytetään fontin värittämiseen.
Alla olevasta kuvasta voidaan nähdä, että
- ja -tunnisteet on muotoiltu onnistuneesti äskettäin ilmoitetuilla fonteilla:
Olemme tarjonneet menetelmän CSS @font-face -säännön käyttämiseen.
Johtopäätös
Fonttityyleillä on tärkeä rooli tehtäessä kaikista sovelluksista esteettisesti houkuttelevia. Järjestelmämme kirjasintyylejä on rajoitettu, kun taas kehittäjä tarvitsee erilaisia kirjasimia kaunistaakseen verkkosovelluksiaan. Tätä varten CSS antaa meille mahdollisuuden käyttää @font-face -sääntöä mukautettujen kirjasimien lisäämiseen. Tämä artikkeli on osoittanut @font-face-säännön, jonka avulla voit mukauttaa kirjasintyyliä sovelluksessamme.