Az @font-face egy CSS-szabály, amely lehetővé teszi a betűtípusok megjelenítését az internetes weboldalakon. Mielőtt létezett volna ez a szabály, a webmesterek korlátozott számú betűtípust használhattak az oldalaikon, amelyek a legelterjedtebbek és a felhasználók számítógépére telepítettek. Az @font-face megjelenésével bármilyen konkrét betűtípus könnyen csatolható egy weboldalhoz.
Ha letöltötte a betűtípust az oldalunkról, a betűtípusokat tartalmazó archívumban kész CSS-kódot talál, amelyet ki kell másolni és be kell helyezni a projekthez csatolt CSS-dokumentumba.
Lépésről lépésre történő telepítés
1. Válassza ki a kívánt betűtípust, és kattintson a "letöltés a weboldalra" gombra.
2. A webhely gyökerében hozzon létre egy mappát fonts, és másolja be a letöltött betűtípusokat.
Nyissa meg a CSS dokumentumát, és másolja bele az archívumból származó szövegfájl tartalmát.
4. Győződjön meg arról, hogy a betűtípus mappa elérési útvonala helyesen van-e írva. A mappa helyétől függően, ahol a betűtípusok találhatók, az elérési útvonal tartalmazhat egy vagy több pontot.
5. Kész. Másolja ki a családnevet tartalmazó tulajdonságot, és illessze be abba a szelektorba, amelyhez a stílusokat írja.
Mi van akkor, ha már letöltöttem a betűtípust máshonnan, és be akarom csatlakoztatni?
Ebben az esetben keresnie kell egy betűtípus-konvertálót az interneten, és a ttf betűtípust (vagy otf-et) át kell alakítania a megfelelő formátumokra, nevezetesen eot, svg, woff és woff2 formátumokra. Ez biztosítja, hogy a betűtípus minden böngészőben, valamint mobileszközökön is megfelelően jelenjen meg és működjön.
Ezután magadnak kell kiírnod az @font-face szabályt, tiszteletben tartva annak szintaxisát.
Az @font-face szintaxis
A szabály szintaxisa nagyjából alaptulajdonságokra és haladó tulajdonságokra osztható.
Basic:
- font-family - megadja a betűtípus nevét.
- src - jelzi a betűtípus útját. Ez lehet az Ön weboldalának szerverén található betűtípus URL címe, más szerverén található betűtípusok URL címe (például Google Fonts), vagy egyszerűen a felhasználó számítógépén található betűtípus neve (Helvetica New Bold, Tahoma, Georgia stb.) .
Kibővítve:
- font-display - meghatározza, hogy a betűtípus hogyan jelenik meg, attól függően, hogy letöltötték-e és készen áll-e a használatra.
- font-stretch - lehetővé teszi a szöveg szélességének beállítását.
- font-style - meghatározza, hogy a betűtípus sima, dőlt vagy ferde (az utóbbi kettő nem ugyanaz).
- font-weight - A betűtípus telítettségének beállítása, 100-tól 900-ig terjedő skálán (100-kicsi, 900-kicsi).
- font-variant - határozza meg, hogy a kisbetűket hogyan kell megjeleníteni - hagyja őket változatlanul, vagy tegye őket teljesen kisbetűsre (nagybetűsre).
- font-feature-settings - lehetővé teszi az OpenType betűtípusok fejlett tipográfiai jellemzőinek kezelését.
- font-variations-settings - négybetűs tengelynevek megadásával lehetővé teszi az Open Type és TrueType betűtípusok variációinak alacsony szintű vezérlését.
- unicode-range - meghatározza a betűtípusban használandó Unicode-kódok (glifák) tartományát.
Betűtípus csatlakoztatása az oldalához a Google Fonts segítségével
A Google Fonts használata a legegyszerűbb módja annak, hogy egy betűtípust a weboldalához kapcsoljon. Látogasson el a weboldalukra, keresse meg a kívánt betűtípust, válassza ki a megfelelő betűtípust a telepítéshez, és másolja ki a kódot.
A másolt kódot a head tag testébe kell elhelyezni a html oldalon.
Hátránya ennek a módszernek az, hogy ha a honlap készítése során elvesztette az internetet - a betűtípusok nem jelennek meg, és a szabványos betűtípusok helyettesítik őket, mivel a fájlok nem a helyi számítógépen, hanem a Google szerverein találhatók. Továbbá jó eséllyel előfordulhat, hogy amikor eljön az ügyfélhez az elrendezés bemutatására (vagy csak tájékoztatásra), és nincs Wi-Fi, a probléma ismét megtörténik.
