5.06 Szövegformázás - fontok

Betűtípusok (font)

  • font-family:   
    • Talp nélküli: Arial, Helvetica, Sans-serif, Verdana
    • Serif (talpas): Times, Times New Roman, serif
    • Cursive (kézzel írott):
    • Fantasy (dekorációs célú)
    • Monospace (rögzített szélesség): Ez így egy monospace
  • font-style: normal, italic, oblique (?)
  • font-size: betűméret - 12px-16px
  • font-weight: (betűk vastagsága) lighter (200), normal (400), bold (700), bolder         
  • font-variant: (normal, SMALL-CAPS - small-caps)

Google web font:

<link href='https://fonts.googleapis.com/css?family=Sacramento&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

pl. font-family: Sacramento, cursive

Link: https://fonts.google.com/

Szöveg színe

  • Szöveg színe: color: szín;
    • szín megadása
      • #rrggbb - minden komponens 0..255 ig lehet (#00..#ff),
      • #rgb - ekkor minden komponens 0..15 értéket vehet fel
      • "függvénnyel": rgb(0, 0, 255)
      • nevekkel: blue, green, yellow, stb
    • pl. Vörös, #00ff00 - zöld, #888888 - középszürke, #333 - sötétszürke, Fehér: #FFFFFF, fekete: #000000

Háttérszín állítása

  • Háttérszín: background-color:
    • ugyanazokat a megadási módokat lehet használni

Szöveg aláhúzása: text-decoration:

  • underline - aláhúzott
  • line-through . áthúzott
  • overline - felülhúzott
  • blink - villogó
  • none - nincs dekorácioó

Szöveg igazítása (balra, jobbra, középre, sorkizárás)

  • text-align: left; - balra igazítás
  • text-align: right; - jobbra igazítás
  • text-align: center; - középre igazítás
  • text-align: justify; - sorkizárás,

Kisbetű és nagybetű átalakítás (text-transform):

  • text-transform:uppercase; - CSUPA NAGYBETŰ
  • text-transform: lowercase; - csupa kisbetű
  • text-transform: capitalize; - Minden Szó Eleje Nagybetűs
  • text-transform: none; - nincsen változás

Szöveg behúzása (text-indent)

  • text-indent: 50px; - A a több soros szöveg első sora ennyivel beljebb kezdődik.

Betűk távolságának beállítása (letter-spacing)

  • letter-spacing: normal;
  • letter-spacing: 5px; - széthúzott szöveg
  • letter-spacing: -2px (!!!!!) - Kissé össze lett gyúrva a szövegmegmutatom

Sormagasság beállítása (line-height)

  • line-height: normal;
  • line-height: 2 (dupla sormagasság)
  • line-height: 10px; - csak 10px lesz egy sor magassága (Ha a font-size nagyobb, mint a sormagasság, akkor ez gáz)
  • line-height: 150%; - a normál  másfélszerese a sormagasság.

Szavak közötti távolság (word-spacing)

Hasonlít a betűk közötti távolságra, csak ez a szóközökre vonatkozik

  • word-spacing: norlmal;
  • word-spacing: 10px;
  • word-spacing: -10px;

Szöveg árnyéka (text-shadow)

  • text-shadow: távolság távolság távolság szín
  • text-shadow: -5px -5px -5px red;