A webes betűtípusok használata

Sep 13, 2025

kézikönyv

Az alábbiakban a BRAM Stein webfont kézikönyve készül. Vásárolja meg itt .

Webes betűtípusok a CSS-ben a @ Font-face szabály. Ha webfejlesztő vagy, akkor valószínűleg írta, másolt és beillesztett, vagy a legkevésbé látott egy @ Font-face szabály.

A teljesség kedvéért azonban gyorsan futunk egy alapvető példával:

 @ font-face {
  Font-Család: Elena;
  SRC: URL (Elena-Residay.woff);
}

Ez létrehoz egy új webes font családot, amely hivatkozhat a betűtípus család vagy betűtípus Részletes tulajdonság. De itt hiányzik valami. Ha egy betűtípus-veremben egy webes betűtípust hivatkozhat, mindig győződjön meg róla, hogy legalább egy visszafogható betűtípust tartalmaz, ha a webes betűtípus nem tölti be.

Itt, ha Elena nem tölti be, a böngésző vissza fog térni a generikusra serif betűtípus család:

 p {
  Font-Family: Elena, Serif;
}

Több van a betűtípusok, de most, tartsuk meg a betűtípusunkat egyszerűen csak a generikus serif és sans-serif Font családok.

Font családok

A betűtípuscsalád létrehozása több stílussal történik egy @ Font-face szabály minden stílushoz és ugyanazt használja betűtípus család név. A következő @ Font-face A szabályok egy normál és merész stílusú családot hoznak létre:

 @ font-face {
     Font-Család: Elena;
     SRC: URL (Elena-Residay.woff);
     betűsúly: normál;
}
   @ Font-face {
     Font-Család: Elena;
     src: URL (Elena-bold.woff);
     betűtípus: merész;
}

Ezt a betűtípus-családot a CSS-ben használhatja a választók családnevének és súlyának hivatkozásával. Ez a szabályos stílust alkalmazza a bekezdésekre és a merész stílusra erős bekezdések:

 p {
  Font-Family: Elena, Serif;
}

p erős {
  betűtípus: merész;
}

kívül betűtípus , @ Font-face elfogadja a betű stílus és betűtípus olyan tulajdonságok leírása, amelyek meghatározzák a stílusokat, például az olalmozást és a kondenzált. Mindhárom ingatlanleíró lehet használni egyetlen betűtípus család létrehozására több stílusban. Elméletileg ez lehetővé teszi, hogy 243 egyedi stílust tartalmazó családot hozzon létre (kilenc betűtípus értékek × három betű stílus értékek × kilenc betűtípus értékek).

A gyakorlatban azonban 27 értékre korlátozódik, mivel egyes böngészők nem támogatják betűtípus . Vessen egy pillantást az alábbi táblázatra, hogy megnézze, mely böngészőket használhatja, és nézze meg itt részletesebb információkért.

Click the icon in the top right to enlarge the image — Kattintson az ikonra a jobb felső sarokban a kép nagyításához

Szerencsével a fennmaradó böngészők végrehajtják a betűtípus Hamarosan, és az összes 243 betűtípus-osztályozást használhatja.

Betűtípus formátumok

A src A leíró megmondja a böngészőt, ahová egy betűtípust kap. Az előző példákban alkalmazott egyetlen betűformátum, de akkor gyakran látni URL több font formátumok kombinált formában tippeket, amelyeket fűz az URL-címet a formátum ("érték") szintaxis.

Formátum Tippek Mondja el a böngészőnek, hogy milyen formátumú a betűtípus fájl egy adott URL-ben.

 @ font-face {
  Font-Család: Elena;
  SRC: URL (Elena-Regular.woff2) formátum ("Woff2"),
       URL (Elena-Regular.woff) formátum ("Woff");
}

Ha több formátumot sorol fel, a modern böngészők kiválasztják az első formátumot, amelyeket a formátumú tipp alapján támogatnak. Ezért fontos, hogy a web betűtípus formátumokat a legkevésbé tömörítés sorrendjében sorolja fel.

Annak ellenére, hogy formátumú tanácsok opcionálisak, mindig tartalmazzák őket - hagyják, hogy a böngésző ismerje a formátumot anélkül, hogy letöltené a betűtípust. Például, ha a böngésző nem támogatja a WOFF2, és nem támogatja a WOFF, akkor hagyja ki az WOFF2 font fájl alapján a formátum célzást.

A böngészők több web betűformátumot támogatnak: Opentype (TrueType), Eot, Woff és Woff2. Néhány böngésző támogatja az SVG betűtípusokat is, de elavult, és már nem kell használni (és nem szabad összetéveszteni a Új opentype-svg formátum ).

Az EOT, WHOFF és WOFF2 technikailag nem betűtípus formátumok. Ezek tömörített Opentype fájlok különböző mértékű tömörítéssel. A Woff2 a legjobb tömörítést kínálja, majd a Woff és az EOT.

A böngészők lefedettségének kutatásában előfordulhat, hogy találkozhatsz valamihez golyóálló @ Font-face szintaxis a fontspring.

A golyóálló szintaxis használ EOT, WOFF2, WOFF, nyers OpenType és SVG font fájlok maximális böngésző lefedettség:

 @ font-face {
  Font-Család: Elena;
  src: URL (Elena.eot? #EFIX) formátum ("Beágyazott-opentype"),
       url (elena.woff2) formátum ("Woff2"),
       URL (Elena.woff) formátum ("Woff"),
       URL (Elena.otf) formátum ("opentype"),
       URL (Elena.svg # Elena) formátum ("svg");
}

Az első URL-vonal egy kicsit furcsanak tűnhet neked. Az Internet Explorer 8 és az alábbi verziói nem támogatják a több betűtípus-formátum szintaxisát, és kezeljék a teljes értéket a src vagyon, mint az URL.

A golyóálló szintaxis trükkök Internet Explorer 8 alatt és azt gondolni, hogy a fennmaradó URL része a részazonosítóból az első URL-t. Mivel a fragmens azonosítókat figyelmen kívül hagyják a fájlok letöltésekor, az Internet Explorer 8 és az alábbiakban egyszerűen használja az első URL-t.

Az Internet Exploreren kívüli böngészők kihagyják a vonalat, mert nem támogatják az árakat.

A többi bejegyzés az, amit elvárnánk: a preferencia sorrendjében felsorolt betűtípus formátumok.

De a golyóálló szintaxis még mindig releváns? Valójában azt hiszem, ez káros. Az SVG betűtípusokat elszámolják, és csak a már nem használt böngészők támogatják.

A legtöbb weboldal támogatja az Internet Explorer 9-et és felfelé, de a szintaxis az EOT-ot az első preferált betűtípus formátumként. Annak ellenére, hogy az Internet Explorer 9 és Up Support Woff, ezek a verziók továbbra is letölthetik az EOT fájlt, egyszerűen azért, mert először szerepel.

Mivel a legtöbb weboldal már nem támogatja a régi böngészőket, nagyon ajánlom egy egyszerűsített szintaxis használatát. Ez az egyszerűsített szintaxis magában foglalja az összes modern böngészőt, valamint kissé régebbieket, amelyek még mindig aktív használatban vannak, például Android 4.4 és korábban:

 @ font-face {
  Font-Család: Elena;
  SRC: URL (Elena.woff2) formátum ("Woff2"),
       URL (Elena.woff) formátum ("Woff"),
       URL (Elena.otf) formátum ("opentype");
}

Annak ellenére, hogy a régebbi Android verziókat továbbra is használják, világszerte ezekre a böngészőkre támaszkodnak. Hamarosan valószínűleg képes lesz a nyers opentype formátumot, és még egyszerűsíti a szintaxist még:

 @ font-face {
  Font-Család: Elena;
  SRC: URL (Elena.woff2) formátum ("Woff2"),
       URL (Elena.woff) formátum ("WOFF");
}

Ebben az esetben valaki, aki egy régebbi böngészőt futtat, egyszerűen látni fogja a böngésző betűtípusait a web betűtípus helyett. Rendben van; Még mindig olvashatják a tartalmat a megtartás betűtípusában.

Van egy másik lehetséges érték a src leíró. A helyi A funkció egy helyi font család nevét veszi figyelembe. Ha a betűtípus a rendszeren telepítve történik, a böngésző ezt használja, ezáltal elkerülve egy extra letöltést.

 @ font-face {
  Font-Család: Elena;
  SRC: Helyi ("Elena"),
       URL (Elena-Regular.woff2) formátum ("Woff2"),
       URL (Elena-Regular.woff) formátum ("Woff");
}

Bár ez nagyszerű optimalizálásnak tűnhet, semmi sem garantálja, hogy a helyi betűtípus megfelel a webes betűtípusnak.

A betűtípus különböző verzióját, egy különböző nyelvi támogatással, vagy akár teljesen más betűtípust kaphat. Ezért azt javaslom, hogy ne használja a helyi Function, hacsak nem találja meg ezeket a leállókat elfogadhatónak.

Ez egy excerpt Bram Stein Webfont kézikönyv , egy könyvből. Ban, megmagyarázza, hogy mit kell fontolóra venni a web betűtípusok kiválasztásakor, hogyan kell hatékonyan használni őket, és hogyan optimalizálhatja a teljesítményt.

Kapcsolódó cikkek:

Mi a pokol blokk?
30 króm kiterjesztésű webes tervezők és devs
20 Csodálatos ingyenes Google web betűtípusok

A webes betűtípusok használata

Font családok

Betűtípus formátumok

kézikönyv - Most Popular Articles

Hozzon létre egy egérvezérelt parallax háttérhatást

Hogyan kell létrehozni egy helyi fejlesztési környezetet

Mindössze annyit kell tudnod, hogy a JavaScript kód felosztása

Stílus egy webhelyet SASS használatával

Hogyan építsünk egy AR alkalmazást

Modell egy idegen kalóz teremtmény zbrush-ben

Hogyan készítsünk rajzfilmfigurákat a Cinema 4D-ben

Hogyan hozhat létre reális CG ruhát

Kategóriák