CSS betűtípusok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Fontos a megfelelő betűtípus kiválasztása a weboldalához!

A betűtípus kiválasztása fontos

A megfelelő betűtípus kiválasztása nagy hatással van az olvasók tapasztalataira a weboldal.

A megfelelő betűtípus erős identitást teremthet márkájának.

Fontos, hogy könnyen olvasható betűtípust használjunk. A betűtípus hozzáadódik értéket a szövegedhez. Fontos a megfelelő szín és szövegméret kiválasztása is a betűtípushoz.

Általános betűtípuscsaládok

A CSS-ben öt általános betűtípuscsalád létezik:

  1. A Serif betűtípusok minden betű szélén egy kis körvonal található. A formalitás és az elegancia érzetét keltik.

  2. A Sans-serif betűtípusok tiszta vonalakkal rendelkeznek (nincs kis vonalvezetés). Modern és minimalista megjelenést kölcsönöznek.

  3. Monospace betűtípusok - itt az összes betű azonos rögzített szélességű. Mechanikus megjelenést kölcsönöznek.

  4. A kurzív betűtípusok az emberi kézírást utánozzák.

  5. A Fantasy betűtípusok dekoratív/játékos betűtípusok.

Az összes különböző betűtípusnév valamelyik általános betűtípuscsaládhoz tartozik.

Különbség a Serif és a Sans-serif betűtípusok között

Megjegyzés: A számítógép képernyőjén a szans-serif betűtípusok könnyebben olvashatók, mint a serif betűtípusok.

Néhány betűtípus példa

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

A CSS betűtípus-család tulajdonsága

A CSS-ben a font-family tulajdonságot használjuk a szöveg betűtípusának megadására.

Megjegyzés: Ha a betűtípus neve egynél több szóból áll, akkor azt idézőjelbe kell tenni, például: "Times New Roman".

Tipp: A font-family tulajdonságnak több betűtípusnevet is tartalmaznia kell tartalék rendszerként, a böngészők/operációs rendszerek közötti maximális kompatibilitás biztosítása érdekében. Kezdje a kívánt betűtípussal, és fejezze be egy általános családdal (engedni, hogy a a böngésző válasszon egy hasonló betűtípust az általános családból, ha nincs más betűtípus elérhető). A betűtípusneveket vesszővel kell elválasztani. Olvasson többet a tartalék betűtípusokat a következő fejezetben.

Példa

Adjon meg néhány különböző betűtípust három bekezdéshez:

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

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

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

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

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>