Számítógépünkön 2 fajta betűtípust különböztetünk meg.
- talpas (serif) --> rövidebb szövegeknél hasnzáljuk
- talp nélküli (sans-serif) --> egyszerűbb olvasni --> hosszabb szövegeknél használjuk
A CSS-ben is 2 fajta betűtípusról beszélünk:
- általános betűcsaládok (generic family) --> pl.: talpas, talp nélküli
- talpas --> rövid vonal van a néhány betű alján
- talp nélküli --> nincsen rövid vonal az alján :D
- monoszkóp --> minden karakter azonos szélességű!!
- betűcsaládok (font family) -->Arial, Times New Roman
Akit jobban érdekel a téma, olvassa el ezt a cikket. A lecke folytatódik...
Gyakran előfordul, hogy az olvasó számítógépére nincsen feltelepítve az adott betűtípus. A CSS-ben lehetőség van több betűtípus megadására. A betűtípusok megadásának módja:
elem{
font-family:"Times New Roman", Arial, serif;
}
Itt vannak a lehetséges betűtípusok.
Ha a betűtípus neve több szóból áll, akkor idézőjelek közé kell tenni. Ebben az esetben a böngésző ellenőrzi, hogy a számítógépre telepítve van-e a Times New Roman betűtípus, ha nincs, akkor megpróbálja az Arial betűtípust, s ha az sincs, akkor beállít egy talpas betűtípust.
BETŰTÍPUS STÍLUSA:
A font-style megadja a betűtípus stílusát a szövegen belül. elem{font-style:normal;}
Lehetséges értékeit itt kipróbálhatjátok.
BETŰTÍPUS MÉRETE:
A méreteket két módon adhatjuk meg.
Értékeit itt kipróbálhatjátok.
KIS KAPITÁLIS:
Megadhatjuk, hogy egy szöveg kis kapitális legyen e. Kis kapitálist akkor használunk, hogyha szeretnénk egy szöveget nagybetűssé tenni, de nem szeretnénk annyira kiemelni, mint egy sima nagybetűs szöveget. Lényege, hogy a szöveg nagybetűs lesz, de az eredetileg is nagybetűk nagyobb nagybetűk :D.
p{font-variant:small-caps;}
Legközelebb megnézzük a linkek és listák formázását.
elem{
font-family:"Times New Roman", Arial, serif;
}
Itt vannak a lehetséges betűtípusok.
Ha a betűtípus neve több szóból áll, akkor idézőjelek közé kell tenni. Ebben az esetben a böngésző ellenőrzi, hogy a számítógépre telepítve van-e a Times New Roman betűtípus, ha nincs, akkor megpróbálja az Arial betűtípust, s ha az sincs, akkor beállít egy talpas betűtípust.
BETŰTÍPUS STÍLUSA:
A font-style megadja a betűtípus stílusát a szövegen belül. elem{font-style:normal;}
Lehetséges értékeit itt kipróbálhatjátok.
BETŰTÍPUS MÉRETE:
A méreteket két módon adhatjuk meg.
- abszolút: ilyenkor az elem mérete minden hardveren egyforma. Akkor használjuk, ha a megjelenítő felbontása, mérete ismert.
- relatív: ilyenkor az elem mérete a hardvertől függ. Akkor használjuk, ha a megjelenítő felbontása, mérete nem ismert.
Az alap betűméret 16px (1em).
Betűtípus méretét megadhatjuk:
- pixelben: p {font-size:14px;} <-- ilyenkor a betű magassága 16 14px
- em-ben: előbb említettem, hogy 16 pixel az 1em. Ebből következik a méretek kiszámításának módja:
pixelek/16=em --> em*16=pixelek p {font-size:0.875em;} <-- 0.875*16=14pixel - százalékban: a 16pixel-hez képest százalékosan is megadhatjuk. 50% az 8 pixel, 150% pedig 24px p {font-size:50%;}
BETŰTÍPUS TOVÁBBI FORMÁZÁSA:
Megadja, hogy a betű vastag vagy vékony legyen. Ezzel adhatjuk meg a félkövér karaktereket is. Értékei a következők lehetnek:
- normal: az alapértelmezett szöveg.
- bold: félkövér szöveg
- bolder: félkövérebb szöveg
- lighter: hasonlít a normal-hoz
- számmal: 400 ugyan az, mint a normál, 700 pedig ugyan az, mint a félkövér
- inherit: erről majd később lesz szó, de az öröklődéssel függ össze
Értékeit itt kipróbálhatjátok.
KIS KAPITÁLIS:
Megadhatjuk, hogy egy szöveg kis kapitális legyen e. Kis kapitálist akkor használunk, hogyha szeretnénk egy szöveget nagybetűssé tenni, de nem szeretnénk annyira kiemelni, mint egy sima nagybetűs szöveget. Lényege, hogy a szöveg nagybetűs lesz, de az eredetileg is nagybetűk nagyobb nagybetűk :D.
p{font-variant:small-caps;}
Legközelebb megnézzük a linkek és listák formázását.
