A webfejlesztésben a betűtípus helyes használata vonzó megjelenést kölcsönöz az alkalmazásnak. Ezek a betűstílusok vizuális támpontokat adnak a dokumentum olvasási sorrendjéről. Például a dokumentum fejlécének betűstílusának félkövérnek kell lennie, és másoktól jelentősnek kell lennie. A stílus segít megkülönböztetni a fontos tartalmakat a többitől.
A cikk tanulási eredményei a következők:
- Mik azok a Google Web Fonts?
- Hogyan importálhatok Google betűtípusokat HTML-be?
- Hogyan lehet használni a Google Fonts-t CSS-fájlban?
Mik azok a Google Web Fonts?
A Google webes font egy nyílt forráskódú könyvtár, amely több száz betűstílust vagy -családot tartalmaz. Ezenkívül olyan API-kat is biztosít, amelyek segítenek a webes betűtípusok használatában Android és CSS segítségével. A Google Fonts sokkal könnyebb, mint a többi betűtípuskönyvtár, és ingyenesen elérhető üzleti használatra. Ezeket minden webhelyen könnyebb megvalósítani.
Alapértelmezés szerint a CSS fantasy, serif, Sans serif, cursive és monospace betűstílusokat kínál. A Google Fonts akkor használható, ha más betűstílusokat szeretne használni.
Hogyan importálhatok Google betűtípusokat HTML-be?
A Google Fonts HTML-oldalon való használatához kövesse az alábbi lépéseket.
1. lépés: Válassza ki a betűtípuscsaládot
Először nyissa meg a Google Fonts hivatalos webhelyét, és válassza ki a kívánt betűtípust. Például a „ Homár Kettő ' betűtípus család:
2. lépés: Válassza ki a Stílusokat
Ezután görgessen lefelé a stílusok listájának megtekintéséhez. Adja hozzá őket a gyűjteményéhez a „ + ” jel:
3. lépés: Tekintse meg a kiválasztott családokat
A kiválasztott családok megtekintéséhez kattintson az alábbi ikonra:
4. lépés: Másolja a hivatkozást a HTML-be ágyazáshoz
Ezután görgessen le, és másolja ki a font-család hivatkozását a kiemelt ' Másolat ' ikon:
Hogyan használhatjuk a Google betűtípusokat a CSS-fájlban?
Ha a Google Fonts másolatát CSS-ben szeretné használni a stílushoz, nézze meg a megadott példákat.
1. példa
Tartalmazzon egy ' ” elem bizonyos tartalom vagy bekezdés megadásához:
< p > „A legjobb oktatówebhely” p > A Google Fonts importálásához illessze be a másolt kódot a „
„p” stílusú elem
p {betűtípus család: 'Lobster Two' , kurzív;
szöveg igazítása: középre;
betűméret: 45 képpont;
szín: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
A következő ismertetett CSS-tulajdonságok kerülnek alkalmazásra a HTML-re ' ” címke:
- ' betűtípus család ' a ' értékkel van hozzárendelve „Lobster Two”, kurzív ”. Ez a betűtípuscsalád a Google Fonts szolgáltatásból van importálva.
- ' szöveg igazítás ” beállítja a szöveg igazítását.
- ' betűméret ” határozza meg a betűméretet.
- ' szín ” állítja be a betűszínt.
A képen látható, hogy a betűtípuscsalád sikeresen alkalmazásra került:
2. példa
Vegyünk egy másik példát a „ Nerko One ” Google font. Ebből a célból illessze be ismét a „Nerko One” Google betűtípus URL kódját a „
„p” stílusú elem
p {betűtípus család: 'Nerko One' , kurzív;
betűsúly: 300 ;
betűméret: 30 képpont;
}
Az ' betűtípus család ”, „ font-weight ”, és „ betűméret 'tulajdonságok vannak alkalmazva a HTML-ben' ” elemet.
Kimenet
Megtanítottuk, hogyan importálhat Google webes betűtípusokat a CSS-fájlba.
Következtetés
A Google Fonts CSS-be való importálásához először keresse fel a Google Fonts hivatalos webhelyet, és válassza ki a betűtípus stílusát. Ezután másolja ki a kódot, amely tartalmazza a ' @import ” kulcsszót, és illessze be a CSS fájlba vagy a „