CSS fonts (betűkészlet, betűtípus, betűvastagság)

A CSS segítségével természetesen lehetőségünk van megváltoztatni az alapértelmezett betűkészletet (vagy betűtípust, ki hogy szereti), illetve betűvastagságot. Fontos, hogy olyan betűkészletet, illetve vastagságot válasszunk, amely nem zavaró az olvasó számára.

Általános betűkészletek, betűtípusok

Ezek a legelterjedtebb és leginkább bevált betűkészletek, érdemes ezek közül választani:

• Arial
• Verdana
• Helvetica
• Tahoma
• Times New Roman
• Georgia
• Brush Script MT

Fontos, hogy a kiválasztott betűkészletet teszteljük több böngészőn és eszközön is.

Betűkészlet, betűtípus megadása

A CSS-ben a font-family tulajdonságot használjuk egy betűkészlet meghatározására. Célszerű több betűkészletet is megadnunk egymás után, ha esetleg valamelyik nem lenne elérhető az adott számítógépen, sőt a végére érdemes megadni a betűcsaládot is.

Betűkészlet (betűtípus) megadásának szintaktikája

ELEM {
   font-family: BETŰKÉSZLET(EK);
}
Code language: CSS (css)

A betűkészlet(ek) helyére érdemes megadni minimum kettő betűkészletet és azt, hogy melyik családhoz tartoznak, mert ha az adott számítógépen egyik betűkészlet sem érhető el, akkor abból a betűcsaládból fog választani egyet, ami hasonlít az általad megadottra.

Példa betűkészlet, betűtípus megadására

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

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti példákban az első két érték mindig a betűtípust, míg a harmadik érték a betűcsalád, ahová tartozik.

Betűvastagság

Ha úgy gondoljuk, hogy a betűink megjelenése túl vékony, akkor átállíthatjuk vastagabbra azt.

Betűvastagság szintaktikája

font-weight: ÉRTÉK;
Code language: HTTP (http)

Az érték helyére egy számot érdemes megadni. Megadhatjuk esetleg még a normal vagy bold szavakat is, ahol a normal egy átlagos vastagság lesz, míg a bold egy vastagabb variáció.

Példa betűvastagság megadására

.p1 {
  font-weight: 100;
}

.p2 {
  font-weight: 500;
}

.p3 {
  font-weight: 1000;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Használata nagyon egyszerű és segít weboldalunk felhasználók igényére szabásában.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!