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