A CSS számos tulajdonságot biztosít a betűkészlet testreszabásához. Ezek a betűtípustól a betűstílusig és árnyékokig terjednek.
A CSS betűs tulajdonságai közé tartozik a betűtípus, betűstílus és betűvastagság megadása. Ezek a tulajdonságok természetesen főként azon HTML elemek esetén hasznosak, amelyek szöveget tartalmaznak (p, i stb.). Ugyanakkor tablók esetén is alkalmazhatók.
A font-family segítségével lehet meghatározni a használt betűtípust.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Az eredmény a böngészőben így néz ki:
Az általános betűtípusok például Arial, Helvetica és Times Roman. A CSS tulajdonsággal, font-family, a kívánt betűtípusokat lehet kiválasztani. Ha több betűtípust adunk meg, a sorrend fontos. Ha az első megadott betűtípus elérhető, akkor azt használja. A kívánt betűtípusokat vesszővel kell elválasztani egymástól. Általában egy ún. generikus betűtípuállítást is megadunk. Egy ilyen generikus betűtípusállítással a böngészőket lehetőséget adunk, hogy olyan betűtípust válasszanak, amely legalább hasonló a megadotthoz.
• serif = betűtípusz csapokkal
• sans-serif = betűtípusz csapot nélkül
• cursive = betűtípusz félkövér írásnak
• fantasy = betűtípusz fantázianak
• monospace = betűtípusz egyenlő vastagságú karakterekkel.
A Betűstílus
A font-style tulajdonsággal lehet meghatározni a betűstílust. Ha a választott betűtípus lehetővé teszi, az italic értékkel dőlt betűsírást lehet kikényszeríteni.
Más betűtípusokat lehet ferde által, oblique értékkel megjeleníteni.
A következő CSS tulajdonság, amely az írott betűket befolyásolja, a font-variant. Azon keresztül kis nagybetűket lehet definiálni.
Ehhez használjuk a font-variant tulajdonság esetén az small-caps értéket.
A Betűméret
Nagyon fontos természetesen a betűméret megadása. A CSS ehhez a font-size tulajdonságot biztosítja. A betűméreteket különféle egységekben lehet megadni.
• EM
• REM
• Pixel
• Százalék
• Kulcsszavak
Kulcsszavakként az alábbi változatok állnak rendelkezésre:
• xx-kicsi – nagyon, nagyon kicsi
• x-kicsi – nagyon kicsi
• kicsi – kicsi
• kissebb – kisebb, mint a szülőelemnél
• közepes – közepes
• nagy – nagy
• x-nagy – nagyon nagy
• xx-nagy – nagyon, nagyon nagy
• nagyobb – nagyobb, mint a szülőelemnél
Itt egy példa, hogyan lehet meghatározni a betűméretet:
.egy {font-size: 10px;}
.kettő {font-size: 20px;}
.három {font-size: 110%;}
.négy {font-size: xx-large;}Így néz ki a dolog a böngészőben:
Kérlek, vedd figyelembe, hogy a betűméretemeghatározás témája nagyon összetett, mivel a különböző mértékegységeknek mindegyiknek megvannak a maga előnyei és hátrányai.
Egy jó áttekintést arról, hogy melyik mértékegységet mikor lenne célszerű használni, megtalálod a http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/ oldalon. Annak azoknak, akik nem szeretnék mindezt végigolvasni: A képernyőn való megjelenítés esetében relatív méreteket használj, mint például em. Egyszerű OTP koncepcióknál abszolút egységekre, mint például pt.
A Betűvastagság
Folytatjuk a betűvastagság, másnéven betűstílus, meghatározásával. Ezt szolgálja a font-weight tulajdonság.
.fett {
font-weight:bold;
}
Ez a szintaxis a megjelölt szöveget félkövér betűsírással jeleníti meg.
Lehetséges értékek: bold (félkövér), bolder (különösen félkövér), lighter (vékonyabb) és normal. Ezenkívül numerikus értékek is megengedettek: 100, 200, 300, 400, 500, 600, 700, 800 és 900. Ezek az extra-vékonynál (100) kezdve a különösen vastagnál (900) terjednek.
Definíciók összefoglalása
A betű definícióival kapcsolatban a line-height tulajdonság is fontos szerepet játszik, amelyen keresztül a sor magassága definiálható. Később részletesebben ismertetem ezt a tulajdonságot. Ebben a pontban csak említésre kerül, mivel a következő font tulajdonsággal kapcsolatos.
Össze tudjátok kapcsolni a betűk megjelenítésre vonatkozó eddigi információkat egymással. Ezt az általános font tulajdonság megadásával lehet elérni. Ez tartalmazza a következő egyedi információkat, illetve beleértve ezeket.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
A font segítségével különböző betű formázásokat lehet kombinálni. Értelemszerűen megadhatjátok az előzőleg említett tulajdonságokat, de nem kötelező mindegyiket használni. Viszont kötelező a betűméret és betűtípus tulajdonságok megadása.
A rövidített írásmód segítségével rövidebbé és átláthatóbbá tehetők a CSS fájlok.
Az alább bemutatott sorrendet mindenképpen be kell tartani. Ha a font-size és line-height tulajdonságokat rögzítik, azokat perjellel kell elválasztani. Amennyiben csak egy érték van megadva, az a font-size-ra vonatkozik.
Egy példa:
p {
font: dőlt kis nagybetűs félkövér 1.3em/1.5em Georgia, Times, serif;
}font-size-adjust azzal a céllal lett kifejlesztve, hogy a betűtípusok majdnem azonos méretűek legyenek. Különböző betűtípusok ugyanazt a betűmagasságot különböző x magasságokkal rendelkeznek. Azonban a nagyobb x magasságú betűtípusok jobban olvashatók. Így előfordulhat, hogy egy dokumentum rosszul olvasható, ha az eredeti betűtípus nem áll rendelkezésre, és egy másik kisebb x magasságú betűtípusra van cserélve. A font-size-adjust segítségével ez a különbség kiigazítható.
Egy példa:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
A következő útmutatóban további lehetőségeket tanulhatsz meg, amellyel testreszabhatod a weboldalad betűvizuális megjelenését.
