Felhasználási példák

A font-weight tulajdonság lehetővé teszi a szöveg betűinek megjelenítésének vastagságát. A font-weight tulajdonságot általában a vastag szöveg (félkövér érték) megjelenítésére használják:

amet consectetuer adipiscing

Lorem ipsum fájdalom sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Legyen szemérmetlen. Vestibulum quis ipsum. Aenean nec quam. Légy ultrices tempor massa.

A font-weight tulajdonság másik gyakori használata az eredetileg félkövéren megjelenített szöveg, például a címke normál stílusú megjelenítése HTML-ből:

A félkövér és normál értékek mellett a font stílusú tulajdonság meghatározza a relatív értékeket (könnyebb vékonyabb és merészebb vastagabb). A betű többé-kevésbé vastagsá tételére szolgáló hivatkozás a tartályelemtől örökölt vastagság.

Az alábbi példa bemutatja azokat a különböző eredményeket, amelyeket a könnyebb és a merészebb értékek produkálnak a tároló elem betűjének vastagságától függően:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

A fenti példában a böngészők meghatározzák a tároló elem betűjének vastagságát (ebben az esetben a bekezdést), és növelik (merészebb) vagy csökkentik (könnyebb) vastagságát a belső elemben (ebben az esetben a). Valójában ez csak elméleti magyarázat arra, hogy mit kell tennie a böngészőknek, mivel a gyakorlatban az eredmények nagyon különbözőek.

A font-weight tulajdonság fő problémája, hogy a normál felhasználók által használt betűtípusok szinte mindegyikének többféle súlya van. Valójában a betűtípusok többségének csak normál stílusa (normál értéke) és félkövér stílusa (félkövér értéke) van. Ezért mindaddig, amíg az összes betűkészletnek nincs különféle súlya, a merészebb és könnyebb értékek nem használhatók gyakorlatilag.

Ezenkívül a sok különböző súlyú betűtípusok olyan nómenklatúrát használnak, amely nem szabványos, ezért betűtípusonként változik. Ha például vastagnak tűnik vastagnak látszik, akkor annak neve vastag, szabályos, római, közepes, semiblod vagy fekete lehet a betűtípustól függően.

Emiatt a font-weight tulajdonság nem szavakkal utal az egyes súlyokra, hanem kilenc numerikus értéket határoz meg 100 és 900 között. A normálérték a 400, a félkövér betű a 700 számértéknek felel meg .

A CSS 2.1 szabvány elmagyarázza, hogy minden numerikus érték azt jelzi, hogy ez a vastagság legalább olyan vastag, mint az előző numerikus érték. A következő példa kilenc, különböző vastagságú bekezdést mutat be, bár a gyakorlatban a böngészők csak két különböző vastagságot mutatnak:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Ha egy betűtípusnak csak a normál és a félkövér stílusa van, akkor a 100, 200, 300, 400 és 500 numerikus értékek megfelelnek a normál stílusnak, a 600, 700, 800 és 900 számértékek pedig a félkövér stílusnak.

Az egyes betűtípusok által meghatározott súlyok és a font-weight tulajdonság numerikus értékei közötti megfelelés az egyes böngészőktől függ. Néhány általános szabály azonban alkalmazandó, például a következők:

  • Ha a betűtípus numerikus vastagsági skálát határoz meg mind a kilenc értékkel (például OpenType betűtípusokkal), akkor ezeket az értékeket közvetlenül használják.
  • Ha a betűtípusnak van egy Medium nevű betűkészlete és egy másik típusa Book, Regular, Roman vagy Normal, a Medium stílust az 500-as numerikus értékhez rendeli .
  • A félkövér stílus általában megfelel a 700-as számértéknek .
  • Ha a betűkészlet kevesebb, mint kilenc különböző súlyú, a hiányzó numerikus értékeket az alábbiakban ismertetett algoritmus szerint rendeljük hozzá:
    • Ha az 500 értéket nem rendelték hozzá, akkor ugyanahhoz a stílushoz rendelik, mint a 400 értéket
    • Ha a 600, 700, 800 és 900 értékeket még nem térképezték fel, akkor azokat a következő rendelkezésre álló vastagságra hozzák fel (jellemzően a félkövér értékkel egyenértékűek). Ha más súly nem áll rendelkezésre, akkor azokat az előző vastagságnak megfelelő stílushoz rendelik (általában megegyezik a normál értékkel).
    • Ha a 100, 200 és 300 értékeket nem rendelték hozzá, akkor azokat az előző rendelkezésre álló vastagsághoz rendelik. Ha nem áll rendelkezésre korábbi vastagság, akkor a következő vastagsághoz rendeljük őket.

Ha például négy vastagságú betűtípussal rendelkezik:

Betűkészlet Hozzárendelt méret További hozzárendelt méretek
TypeNameRegular Letter 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Félkövér 700 600
TypeNameLetter Heavy 800 900

Ha például hat vastagságú betűtípussal rendelkezik:

Betűkészlet Hozzárendelt méret További hozzárendelt méretek
TypeNameLetter Book 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Félkövér 700 600
TypeNameLetter Heavy 800 -
TypeNameLetter Black 900 -
TypeNameLetter ExtraBlack - -

A font-weight tulajdonság az egyik leginkább kihasználatlan tulajdonság a CSS-ben. A böngészők és a normál felhasználók által használt betűtípusok korlátai megakadályozzák a helyes működést a normál és félkövér értékeken túl .