CSS referencia => CSS tulajdonságok - folytatás

5.2 Font tulajdonságok

• 5.2 Font tulajdonságok
  • 5.2.2 'font-family'
  • 5.2.3 'font-style'
  • 5.2.4 'font-variant'
  • 5.2.5 'font-weight'
  • 5.2.6 'font-size'
  • 5.2.7 'font'

Vissza a hivatkozó oldalra

5.2.2 'font-family'

Értéke lehet: [[<family-name>|<generic family>],]*[<family-name>|<generic family>]

Alapértelmezés: Böngészőfüggő.
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

Értéke elsőbbségi listája a fontcsalád neveknek, és/vagy az általános fontcsalád-neveknek. Eltérően a legtöbb más CSS tulajdonságtól, az értékeket vesszővel kell elválasztani, így jelezve, hogy azok alternatívák.

BODY {font-family: gill, helvetica, sans-serif}

Példa

A felsorolásban használható típusok:

<family-name>
A választott fontcsalád neve. Fenti példában fontcsalád a 'gill' és a 'helvetica'.

<generic-family>
Fenti példában az utolsó érték az általános fontcsalád-név. A következő általános fontcsalád-nevek vannak definiálva:

• serif; (pl: Times)
• sans-serif (pl: Helvetica)
• cursive (pl: Zapf-Chancery)
• fantasy (pl: Western)
• monospace (pl: Courier)

Az általános fontcsaládok, mint végső eset jöhetnek számításba.
A szóközöket is tartalmazó fontneveket idézőjelbe kell tenni:

BODY {font-family: "new century schoolbook", serif}

Vissza a hivatkozó oldalra

5.2.3 'font-style'

Értéke lehet:

Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A 'font-style' tulajdonság használatával lehet egy fontcsaládból kiválasztani a normál, vagy dőlt betűs megjelenést (az 'italic' és az 'oblique' is dőlt betűt eredményez).

Az értékek azokat a betűtípusokat választják ki a böngésző fontadatbázisából, amelyek az értéknek megfelelően vannak megjelölve. Ha 'italic' jelölésű font nem elérhető, helyette az 'oblique' kerül használatba. Az 'oblique' jelölésű fontokat a böngésző futásidőben is generálhatja; egy normál (álló) font megdöntésével.

H1, H2, H3 {font-style: italic}

H1 EM {font-style: normal}

Példa

Fenti példában a H1 elemen belül szereplő kiemelt (EM) szöveg normál betűkkel jelenik meg.

Vissza a hivatkozó oldalra

5.2.4 'font-variant'

Értéke lehet:

Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A fontcsaládon belüli megjelenítésváltozatok másik típusa a kiskapitális betűtípus. A kiskapitális megjelenítésnél a kibetűk hasonlítanak a nagybetűkhöz, csak méretük kisebb; arányaikban jelentéktelen a különbözőség.

A 'normal' érték a betűtípus normál alakját, a 'small-caps' a kiskapitális alakot választja ki. A CSS-ben elfogadható (de nem megkövetelt), hogy a kiskapitális betűk kisbetűi a normál fontkészlet nagybetűinek futásidejű átméretezésével legyenek kialakítva.

A következő példában található utasítások eredményeképpen a H3 elemben levő szöveg kiskapitális betűkel lesz megjelenítve:

H3 {font-variant: small-caps}

Példa

Vissza a hivatkozó oldalra

5.2.5 'font-weight'

Értéke lehet:

Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A 'font-weight' tulajdonság választja ki a betűtípus súlyát (megjelenését).

Az angol eredetiben a "weight" szó szerepel, a magyarban nincs igazán megfelelő egyetlen szó az itt alkalmazott jelentésre: a betűtípus vastagsága, színintenzitása. Ezért megmaradtam a szó szerinti fordításnál: súly.

Alkalmazható értékei 100 - 900 -ig terjedhetnek, ahol minden egyes szám egy súlyt jelez, amelyek mindegyike sötétebb az előzőnél. A normal kulcsszó a '400'-as, a bold a 700 -as értéknek felel meg.

P {font-weight: normal}    /* 400 */
H1 {font-weight: 700}      /* bold */

A bolder és lighter értékek a szülő elemtől örökölt súlyhoz viszonyítva választják ki az alkalmazandó súlyt.

STRONG {font-weight: bolder}

A további gyermek-elemek az így eredményként kapott értéket öröklik, nem az eredetit.

A fontoknak (font adatoknak) jellemzően van egy, vagy többb tulajdonságuk, amelyeknek értékei a font "súlyát" leíró nevek. Ezeknek a neveknek nincs széleskörűen elfogadott, általános érvényű jelentésük. Feladatuk elsősorban az, hogy súly szerint megkülönböztessék a fontcsaládon belül a különböző kinézetű fontokat. Használatuk különböző fontcsaládok között meglehetősen változó. Az a font, amit boldnak (félkövérnek) gondolhatnánk, az leírása szerint lehet, hogy Regular, Roman, Book, Medium, Semi-, vagy Demi-bold, Bold, vagy Black, attól függően, mennyire sötét a 'normal' font az adott fontcsaládban. Mivel a neveknek nincsenek mértékadó használati előírásaik, a CSS weight tulajdonság-értékei egy numerikus skálán vannak megadva, ahol a 400-as, vagy normal érték jelenti a fontcsalád "normal" értékét. Ez a súlynév van hozzárendelve ahhoz a kinézetű fonthoz, amelynek neve általában Book, Regular, Roman, illetve ritkábban Medium.

A fontcsaládon belül más súlyok hozzárendelése a numerikus értékekhez az árnyékolási (sötétítési) sorrend megtartásával történik. A következő műveleti sorrend megmutatja, hogy egy tipikus esetben hogyan történik a súlyok számértékhez rendelése.

• Ha a fontcsalád már használ kilencértékű numerikus skálát, a hozzárendelés közvetlenül történik.
• Ha a fontcsaládban a medium érték és a Book, Regular, Roman, Medium értékek más súlyt jelentenek, a medium értékhez az 500 lesz hozzárendelve.
• A boldként jelölt font leggyakrabban a 700-as értéket kapja.
• Ha a fontcsaládban kevesebb, mint kilenc súlyérték van, a "lyukak" kitöltésére a következő algoritmus használatos:
  Ha az '500'-as érték hozzárendelés nélküli, ahhoz a fonthoz lesz hozzárendelve, amelyikhez a '400'. Ha a '600', '700', '800', vagy '900'-as értékek valamelyike marad hozzárendelés nélkül, ahhoz a fonthoz lesznek hozzárendelve, amelyiket a következő sötétebbnek megfelelő kulcsszó kijelöl. Ha a '300', '200', vagy '100'-as értékek valamelyike marad hozzárendelés nélkül, ahhoz a fonthoz lesznek hozzárendelve, amelyiket a következő világosabbnak megfelelő kulcsszó kijelöl.

A következő példa mutatja ennek végrehajtását. A 'Család 1' fontcsaládban négy súlyt feltételezünk, a világosabbtól a sötétebb felé: Regular, Medium, Bold, Heavy. A 'Család 2' fontcsaládban 6 súly van: Book, Medium, Bold, Heavy, Black, ExtraBlack. Figyeljük meg, hogy a 'Család 2 ExtraBlack' fonthoz nem rendelünk értéket.

Elérhető kinézetek  | Hozzárendelt érték | Kitöltött "lyukak"
--------------------+--------------------+--------------------
Család 1 Regular    |        400         |   100, 200, 300
Család 1 Medium     |        500         |
Család 1 Bold       |        700         |   600
Család 1 Heavy      |        800         |
--------------------+--------------------+--------------------
Család 2 Book       |        400         |   100, 200, 300
Család 2 Medium     |        500         |
Család 2 Bold       |        700         |   600
Család 2 Heavy      |        800         |
Család 2 Black      |        900         |
Család 2 ExtraBlack |      (nincs)       |

Mivel a bolder és lighter relatív kulcsszavak célja a családon belül a fontok sötétebben, vagy világosabban történő ábrázolása, és mert a fontcsaládoknak nincs valamennyi súlyértékhez fontja hozzárendelve, a bolder kulcsszó hatására a fontcsalád következő sötétebb, a lighter kulcsszó hatására a fontcsalád következő világosabb tagja kerül használatba. A pontosság kedvéért a bolder és lighter relatív kulcsszavak jelentése a következő:

• A bolder azt a súlyt választja ki, amelyik sötétebb, mint az eredeti örökölt érték. Ha nincs megfelelő, ez egyszerűen a következő numerikus értéket jelenti (és a font változatlan marad). Ha az örökölt érték '900' volt, az eredményül kapott súly is '900' lesz.
• A lighter hasonlóképpen jár el, csak ellenkező irányban. A következő világosabb súlyértékhez tartozó kulcsszót választja ki; ha nincs megfelelő, a következő világosabb számértéket (és a megjelenített font változatlan marad).

Nincs garantálva, hogy minden font-weight érték hatására az alkalmazott font sötétebb lesz; a fontcsaládok egy részében csak normál és félkövér típus van, míg más fontcsaládok nyolc különböző súlyértékkel rendelkeznek. Nincs garantálva az sem, hogy a böngészők helyesen rendelik egymáshoz az ugyanahhoz a fontcsaládhoz tartozó fontokat a megfelelő súlyértékekkel. Az egyetlen garantálható következmény az, hogy egy adott értéknél a font nem lesz kevésbé sötét, mint egy világosabb értéknél.

Példa

Vissza a hivatkozó oldalra

5.2.6 'font-size'

Értéke lehet: <abszolút méret> | <relatív méret> | <hossz> | <százalék>

Alapértelmezés: medium
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Viszonyítási alap a szülő elem fontmérete

<abszolút méret>

Az abszolút méret egy indexet jelent a böngésző által nyilvántartott fontméret-táblázaton. Lehetséges értékei:
[xx-small | x-small | small | medium | large | x-large | xx-large].
A szomszédos indexek közötti különbség megjelenítéskori javasolt értéke 1,5-szörös; ha a 'medium' 10 pontos méretet jelent, a 'large' 15 pontos lesz. A különböző médiatípusokhoz különböző méretezési faktorok szükségesek. A fontméret-táblázat a különböző fontcsaládok esetén különbözhet egymástól.

<relatív méret>
A relatív méret a fontméret-táblázat és a szülő elem valós fontmérete közötti arányt veszi figyelembe. Lehetséges értékei:
[ larger | smaller ]
Ha a szülő elem fontmérete 'medium' volt, a larger érték az aktuális elem fontméretének értékét large -ra állítja. Ha a szülő elem fontméretét a böngésző fontméret-táblázata nem tartalmazza, a böngésző helyettesítheti a kívánt méretet a sorban következővel.

A hossz és százalékos értékek nem férhetnek hozzá a fontméret-táblázathoz az elem aktuális fontméretének kiszámításakor.

Negatív értékek használata nem megengedett.

A többi tulajdonságnál, az 'em' és 'ex' méretértékek az aktuális elem fontméretére hivatkoznak. A font-size tulajdonság esetén azonban ezek a mértékegységek a szülő elem fontméretét veszik alapul.

Példák:

P {font-size: 12pt;}

BLOCKQUOTE {font-size: larger}

EM {font-size: 150%}

EM {font-size: 1,5em}

Ha a javasolt 1,5-szörös méretezési faktor van használatban, az utolsó három deklaráció -eredményét tekintve- megegyezik.

Vissza a hivatkozó oldalra

5.2.7 'font'

Értéke lehet:

Alapértelmezés: Nincs definiálva
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Értelmezhető a font-size és a line-height tulajdonságokhoz.

A font tulajdonság használata gyors elérési lehetőséget biztosít a font-style, font-variant, font-weight, font-size, line-height, font-family tulajdonságok beállításához. Használata a hagyományos rövidutas tipográfiai jelrendszer szabályain alapul.

A lehetséges és alapértékek beállításához lásd az előző bekezdésekben leírt szabályokat. Azon tulajdonságok esetében, ahol érték nincs beállítva, azok alapértelmezett értékei kerülnek használatba.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

A második szabályban a százalékos méretérték a szülő elem fontméretét veszi alapul. A harmadik szabály sormagasságra vonatkozó százalékos értéke magát az aktuális elemet veszi viszonyítási alapul.

Az első három szabályban a 'font-style', 'font-variant', 'font-weight' tulajdonságok nincsenek explicit módon említve, ezért mindhárom tulajdonság alapértelmezett értékét ('normal') veszi fel. A negyedik szabály a 'font-weight' tulajdonságot 'bold'-ra, a 'font-style' tulajdonságot 'italic'-ra állítja, a 'font-variant' pedig implicit módon kapja meg a 'normal' értéket.

Az ötödik szabály állítja be a 'font-variant' (small-caps), a font-size (a szülő elem betűméretének 120%-a), a 'line-height' (a fontméret 120%-a) és a 'font-family' (fantasy) tulajdonságokat.

előző  tetejére  következő