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;