Domů › Text a písmo

Text a písmo

Sdružená definice písma – font

Umožňuje zkrácený zápis všech vlastností písma:

  • font-size
  • line-height
  • font-variant
  • font-weight
  • font-style
  • font-family
p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

p {font: 90% bold;}

Typ písma – font-family

  • Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
    • Bezpatkové (rodina sans-serif)
    • Patkové (rodina serif)
    • Ozdobné písmo (rodina fantasy, cursive)
  • Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)
body, table {
  font-family: 'Arial CE', 'Helvetica CE', Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

Více viz Font-Family.

Velikost písma – font-size

h2 {font-size: 185%;}

Výška řádku – line-height

p {line-height: 1.5;}

Varianta písma – font-variant

abbr {font-variant: small-caps;}

Tučnost písma – font-weight

p {font-weight: normal;}
strong {font-weight: bold;}

Styl písma – font-style

em {font-style: italic;}

Barva textu – color

body, table {color: purple;}

Velikost mezer mezi slovy – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Velikost mezer mezi písmeny – letter-spacing

h1 {letter-spacing: .3em;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

  • normal – výchozí hodnota
  • nowrap – zakáže automatické zalamování řádků
  • pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
  • pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků (nepodporuje IE7-, FireFox 2.0-, Opera 7.5- a Safari 2.0-)
  • pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu (nepodporuje IE7-, FireFox 3.0-, Opera 9.2- a Safari 2.0-)
th {white-space: nowrap;}

Horizontální zarovnání obsahu – text-align

h1 {text-align: center;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

Vertikální zarovnání – vertical-align

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.horni-index {vertical-align: super;} /* v tabulce jako baseline */
.dolni-index {vertical-align: sub;} /* v tabulce jako baseline */
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;} /* v tabulce
 jako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;} /* v tabulce
 jako baseline */
.co-nejnize {vertical-align: bottom;}

IE5- podporuje pouze hodnoty baseline, sub a super.

Dekorace textu – text-decoration

a:hover {text-decoration: underline;} /* podtrzeno */
.ne {text-decoration: line-through;} /* preskrtnuto */
.reklama {text-decoration: blink;} /* blikajici */

IE7 nezná hodnotu blink.

Odsazení prvního řádku – text-indent

p {text-indent: 2em;}

Převod textu – text-transform

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

Stín textu – text-shadow

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8-, (IE5.5 podporuje pouze filtry Shadow a DropShadow)

Směr psaní textu – direction

p {direction: rtl;}

Orientace toku textu – unicode-bidi

p {unicode-bidi: bidi-override; direction: rtl;}