Betűtípus - CSS-trükkök | CSS Almanach 2025

A fontCSS-ben található tulajdonság rövidített tulajdonság, amely az összes alábbi tulajdonságot egyetlen deklarációban egyesíti.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Hét fontrésztulajdonság van, beleértve:

font-stretch: ez a tulajdonság beállítja a betű szélességét, például tömörített vagy kibővített.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: a szöveg dőlt betűvel vagy ferdén jelenik meg.
- normal
- italic
- oblique
- inherit
font-variant: a célszöveget kicsiny nagyra változtatja.
- normal
- small-caps
- inherit
font-weight: beállítja a betű súlyát vagy vastagságát.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: beállítja a betűkészlet magasságát.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: meghatározza az inline elemek fölötti és alatti tér nagyságát.
- normal
- number (font-size multiplier)
- percentage
font-family: meghatározza az elemre alkalmazott betűtípust.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

Az fontingatlan nem olyan egyszerű, mint a többi gyorsírás, részben a rá vonatkozó szintaxis követelmények, részben pedig az öröklési problémák miatt.

Íme egy összefoglaló néhány dologról, amelyet tudnia kell, ha ezt a gyorsírás tulajdonságot használja.

Kötelező értékek

A fontrövidített értékek közül kettő kötelező: font-sizeés font-family. Ha ezek egyikét sem tartalmazza, a teljes nyilatkozatot figyelmen kívül hagyják.

Ezenkívül font-familyaz összes értéket utoljára kell deklarálni, különben ismét a teljes deklarációt figyelmen kívül hagyjuk.

Opcionális értékek

A többi érték mind az öt opcionális. Ha a font-style,, font-variantés közül bármelyiket font-weightfelveszi, akkor azoknak font-sizea nyilatkozat előtt kell szerepelnie. Ha nem, akkor figyelmen kívül hagyják őket, és a kötelező értékek figyelmen kívül hagyását is eredményezhetik.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

A fenti példában három opció szerepel. Amíg ezeket korábban meghatároztuk font-size, tetszőleges sorrendbe helyezhetők.

A line-heightbeillesztés szintén nem kötelező, de font-sizecsak egy előre mutató perjel után és csak utána deklarálható :

body ( font: 44px/20px Georgia, sans-serif; )

A fenti példában a line-height„20px”. Ha kihagyja line-height, akkor a perjelet is el kell hagynia, különben az egész sort figyelmen kívül hagyja.

A font-stretch használatával

Az font-stretchingatlan új CSS3 így ha azt egy régebbi böngésző, amely nem támogatja font-stretcha fontgyors-, akkor okozhat az egész sort kell figyelmen kívül hagyni.

A specifikáció egy tartalék nélküli kiegészítést javasol font-stretch, például:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Öröklés opcionális vásárlásokhoz

Ha valamelyik optianális értéket (beleértve line-height) is kihagyja, a kihagyott opciók nem öröklik az értékeket a szülő elemüktől , amint ez tipikusan jellemző a tipográfiai tulajdonságokra. Ehelyett visszaállnak a kezdeti állapotukra.

Például:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Ebben az esetben az opcionális értékeket (dőlt, kisbetűs és félkövér) elhelyezzük fontaz elem deklarációján . Ezek a legtöbb gyermekelemre is érvényesek lesznek.

Mivel azonban újból kijelentettük a fonttulajdonságot a bekezdéselemeken, az összes opció visszaáll a bekezdésekre, aminek következtében a stílus, a változat, a súly és a vonalmagasság visszaáll a kezdeti értékekre.

Kulcsszavak a rendszer betűtípusainak meghatározásához

A fenti szintaxis mellett a fonttulajdonság lehetővé teszi a kulcsszavak használatát is értékként. Ők:

caption
icon
menu
message-box
small-caption
status-bar

Ezek a kulcsszóértékek azt a betűtípust állítják be, amelyet a felhasználó operációs rendszerén használnak az adott kategóriához. Például a „felirat” meghatározása azt állítja, hogy az elem betűtípusa ugyanazt a betűtípust használja, amelyet az operációs rendszer használ a feliratozott vezérlőkhöz (gombok, legördülő menü stb.).

Egyetlen kulcsszó tartalmazza a teljes értéket:

body ( font: menu; )

A korábban említett többi tulajdonság nem érvényes ezekkel a kulcsszavakkal együtt. Ezek a kulcsszavak csak fontgyorsírással használhatók, és nem deklarálhatók az egyes hosszúkézi tulajdonságok egyikével sem.