Hogyan kössünk egy betűtípust egy weboldalhoz az @font-face használatával?

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.

Hogyan töltsön le egy betűtípust

2. A webhely gyökerében hozzon létre egy mappát fonts, és másolja be a letöltött betűtípusokat.

A betűtípusok könyvtárának létrehozása

Nyissa meg a CSS dokumentumát, és másolja bele az archívumból származó szövegfájl tartalmát.

CSS dokumentum, kapcsolat betűtípus

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.

Válassza ki a megfelelő módot

5. Kész. Másolja ki a családnevet tartalmazó tulajdonságot, és illessze be abba a szelektorba, amelyhez a stílusokat írja.

Kész @font-face

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

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.

Betűtípus kiválasztása

Betűtípusok kiválasztása

Másolja a kódot

A másolt kódot a head tag testébe kell elhelyezni a html oldalon.

Kód beágyazása a head tag testébe

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.


Frissítve:

2018-07-20

Szerző:
Hogyan kössünk egy betűtípust egy weboldalhoz az @font-face használatával?
Értékelje ezt a cikket:

4 /63 a oldalról 5

Hozzászólások (0)