22.3. fejezet: CSS alapismeretek – Betűtípusok

A CSS betűtípus-családok két alapvető fajtára tagozódnak:
-    általános család – egyszerű kinézettel rendelkező típusok, pl.: „Serif” vagy „Monospace”.
-    speciális családok – valami különleges kinézettel, pl.: „Arial” vagy „Times New Roman”.
A legfontosabb általános családok:
-    Serif: Az egyes betűk végén van pár vonal, de ezek nem feltétlenül láthatóak.
-    Sans-serif: Ugyanaz, mint a fenti, de kísérő vonalak nélkül.
-    Monospace: Minden karakter megegyező szélességű.

font-family: a betűtípus beállítása. Több betűtípust is be lehet állítani egymás után. Ha az elsőt nem támogatja a böngésző, akkor jön a második, majd a harmadik, stb. Ha egyiket sem támogatja a böngésző, akkor jön az alapértelmezett típus. Példa:

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

font-style: Betűstílus. A leggyakoribb a döntött.
Paraméretek: normal (= normál; alapértelmezett), italic (= döntött), oblique (= egyszerű döntött, de alig támogatott).
Példa:

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

font-size: Betűméret. 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.
Példa képpontokkal:

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

Ugyanez „em”-mel:

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ális; 700=bold / kövér)
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).
Példa:

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

font: a fenti tulajdonságok teljes beállítása egyszerre.
Megjegyzés: érdemes figyelni a sorrendre, amely 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;
Példa:

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

Még egy gyakorlati példa ehhez a ponthoz:

<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>

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