Tamás Ferenc: Weblapkészítés HTML alapokon – 7. rész

CSS alapismeretek 2. rész

 

21.1. fejezet: CSS alapismeretek – Betűformázások

font-family: Megadja a betűtípus családjának nevét.
Paraméterek: családnevek: Times, Helvetica, Arial, Western, vagy Courier.
általános nevek: serif, sans-serif, cursive, fantasy, vagy monospace.
HTML-minta: { font-family : Paraméter }
Scriptben: objectum.style.fontFamily [ = Paraméter ]

Konkrét példa:

p {
    font-family: "Times New Roman", Times, serif;
}

 

font-style: Betűtípus.
Paraméterek: normal (= normál; alapértelmezett), italic (= döntött), oblique (= ez is döntött, de kevésbé támogatott).
HTML-minta: { font-style : paraméter }
Scriptben: objectum.style.fontStyle [ = paraméter ]

Konkrét példa:

p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}

 

font-size: Betűméret. Bár a HTML/CSS nyelvben lehetséges a méret ilyenképpen való változtatása, de ha lehetséges, inkább fejezetcímeket (H1…H6) vagy bekezdést (P) használjunk helyette.
Paraméter: abszolút-méret | relatív-méret | hossz | százalék. Alapérték: medium (közepes).
Az abszolút méret számokkal értelmezhető vagy kulcsszavak: xx-small | x-small | small | medium | large | x-large | xx-large.
Relatív méret lehetséges értékei: larger | smaller.
Hosszúság: Egy abszolút (szám)érték a méret részére.
A százalékérték a szülőelem %-ában értendő. Csak egész szám lehet, melyet közvetlenül követ a %-jel.

Ha nincs megadva egyéb módon, akkor az alapértelmezett méret: 16px (=1em).
Lehetséges hosszúság-egységeket lásd itt:
http://tferi.hu/html-konyv/css-mertektablazat.
HTML-minta: { font-size : paraméter }
Scriptben: objectum.style.fontSize [ = paraméter ]

Konkrét példa:

h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
p {
    font-size: 14px;
}

Betűméret képpont (px) helyett em-mel: Az em-méretezési szabvány a W3C konzorcium által ajánlott méretezés. Az alapértelmezett méret a 16 pixel (képpont). Ez megfelel az 1em-nek, tehát az átszámítása: pixel/16=em.

Megjegyzés: a két módszer keverhető!

Konkrét példa – a fenti mintájára:

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

 

font-weight: A szöveg vastagságát adja meg.
Paraméterek: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
(Érthetőbben: 400=normal / normál; 700=bold / kövér)
HTML-minta: { font-weight : paraméter }
Scriptben: objectum.style.fontWeight [ = paraméter ]

Konkrét példa:

p.normal {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}

 

font-variant: A kisbetűs betűk típusát adják meg.
Paraméterek: normal (=normál; alapértelmezett), small-caps (=kisméretű nagybetűk).
HTML-minta: { font-variant : paraméter }
Scriptben: objectum.style.fontVariant [ = paraméter ]

Konkrét példa:

p.normal {
    font-variant: normal;
}
p.kicsi {
    font-variant: small-caps;
}

 

font: az összes deklaráció egyszerre.

A fontosabb tulajdonságok kötelező sorrendje: "font-style font-variant font-weight font-size/line-height font-family".

Konkrét példa:

p.ex1 {
    font: 15px arial, sans-serif;
}
p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}

A lehetőségek (teljes) skálája a következő:

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

A további (eddig nem tárgyalt) paraméterek:

-          caption: olyan betűtípust használ, amelyet a feliratozott kezelőelemek használnak (például gombokat, legördülő elemeket stb.).

-          icon: ikon-feliratok.

-          menu: legördülő menük betűtípusa.

-          message-box: dialógus-ablakok betűtípusa.

-          small-caption: a nagybetűk kisebb verziója.

-          status-bar: a felirat-sorban (status bar) használt betűtípus.

-          initial: ez legyen az alapértelmezett érték.

-          inherit: ez a tulajdonság a szülőelemből származik.

Konkrét példa:

<p style="font:caption">Feliratok</p>
<p style="font:icon">Ikonfeliratok</p>
<p style="font:menu">Legördülő menük</p>
<p style="font:message-box">Diagólus ablakok</p>
<p style="font:small-caption">A nagybetűk kisebb verziója</p>
<p style="font:status-bar">Felirat-sor</p>

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_font.asp