O webu
Font

Jedná se o zkratku pro mnoho další font-* vlastností.

Minimální funkční použití vyžaduje uvést velikost písma (font-size) a rodinu písma (použitý font – font-family):

body {
  font: 100% sans-serif;
}

font-style

Styl písma:

  • font-style: normal – výchozí písmo
  • font-style: italickursiva
  • font-style: obliquezkosené písmo, vypadá většinou stejně jako kursiva

font-variant

Ve starší specifikaci CSS umí font-variant pouze nastavit typ písma na kapitálky.

  • font-variant: normal – výchozí písmo
  • font-variant: small-capsmalá velká písmena

(Pro převod textu na malá/velká písmena slouží vlastnost text-transform.)

V novější specifikaci je font-variant zkratka pro další CSS vlastnosti.

  • font-variant-caps
  • font-variant-numeric
  • font-variant-alternates
  • font-variant-ligatures
  • font-variant-east-asian

Některé z těchto vlastností jde používat pomocí font-feature-settings.

font-weight

Upravuje sílu (tučnost).

  • font-weight: normal – normální tloušťka
  • font-weight: boldtučné písmo

Kromě toho existuje možnost nastavit sílu písma na hodnoty z rozmezí 100900. Výsledek potom hodně záleží na konkrétním písmu a prohlížeči.

  • font-weight: 100ukázka síly 100
  • font-weight: 200ukázka síly 200
  • font-weight: 300ukázka síly 300
  • font-weight: 400ukázka síly 400 (odpovídá hodnotě normal)
  • font-weight: 500ukázka síly 500
  • font-weight: 600ukázka síly 600
  • font-weight: 700ukázka síly 700 (odpovídá hodnotě bold)
  • font-weight: 800ukázka síly 800
  • font-weight: 900ukázka síly 900

Pokud daný font umí pouze normální písmo a tučné, bude cokoliv z rozsahu 100500 normální a z 600900 tučné.

Nakonec potom existují ještě hodnoty bolder a lighter. Jelikož se síla písma dědí, lze u potomka vytvořit písmo o jeden stupeň silnější/slabší.

  • font-weight: lighter
  • font-weight: bolder

Jelikož většina písem má pouze dva stupně tučnosti, nemají klíčová slova lighter a bolder přílišné využití.

Test hodnot bolder a lighter

font-size

Absolutními klíčovými slovy

  • font-size: xx-smallukázka velikosti xx-small
  • font-size: x-smallukázka velikosti x-small
  • font-size: smallukázka velikosti small
  • font-size: mediumukázka velikosti medium
  • font-size: largeukázka velikosti large
  • font-size: x-largeukázka velikosti x-large
  • font-size: xx-largeukázka velikosti xx-large

Relativními klíčovými slovy

Písmo bude o stupeň větší/menší než velikost rodiče.

  • font-size: largerukázka velikosti larger
  • font-size: smallerukázka velikosti smaller

Délkovými jednotkami

Velikost se nastaví standardními CSS délkovými jednotkami (em, px a podobně).

font-size: 1em;

Procenty

Písmo bude dvakrát větší než velikost rodiče.

font-size: 200%;

Při použití procent, relativních délkových jednotek (např. em) nebo larger/smaller jde šikovně využívat dědičnosti, klidně na jednom místě změnit velikost písma celého webu a velikosti jednotlivých částí se tomu přizpůsobí.

Živá ukázka

line-height

Když se za velikost písma u zkrácené vlastnosti font napíše lomítko, může se za něj uvést výška řádku.

html {
  font: x-small/300% Arial, serif;
}

Je trochu zvláštní, že pro změnu výšky řádku neslouží font-* vlastnosti, ale line-height.

Výška řádku je hodně důležitá vlastnost s ohledem na dobrou čitelnost textu. Při nastavení line-height společnému obalu stránky (<html>/<body>/<div class="obal">) se snadno stane, že pro velké písmo bude výška řádku malá a pro malá písmena zase moc velká.

Živá ukázka

Je tedy dobré si elementy s větší/menší velikostí písma ohlídat a výšku řádku jim upravit. Snadno se na to zapomene u nadpisů, protože se často vejdnou na jeden řádek, takže se nesprávná výška řádku hned neprojeví.

font-family

Slouží k nastavení rodiny písem / konkrétního fontu. Zadává se konkrétní název písma (například Arial), obecná rodina (sans-serif) nebo víc položek zároveň.

Protože nikdy není jistota, že konkrétní font bude dané koncové zařízení podporovat, obvykle se uvádí několik konkrétních rozšířených fontů zakončených obecnou rodinou.

h1 {
  font-family: Arial, Helvetica, sans-serif
}

Obecné rodiny

Zpravidla si jde vystačit s bezpatkovým (sans-serif), patkovým (serif) a neproporcionálním (monospace) písmem.

  • font-family: sans-serifukázka stylu sans-serif
  • font-family: serifukázka stylu serif
  • font-family: fantasyukázka stylu fantasy
  • font-family: cursiveukázka stylu cursive
  • font-family: monospaceukázka stylu monospace

Uvozovky kolem názvu písma

V některých návodech se uvádí, že víceslovné názvy fontu musí být obaleny uvozovkami. To je pravda jen částečná – uvozovkami musejí být obaleny názvy obsahující čísla a speciální symboly.

Víceslovný název proto bude normálně fungovat i bez uvozovek:

element {
  font-family: Lucida Console, monospace;
}

Systémová písma

Písmo jde také nastavit podle určitých prvků systému. V tom případě se zadává jediná hodnota, která určí použitý font, velikost, tučnost a podobně.

Je poměrně obtížné najít pro tento způsob rozumné využití, možná při snaze napodobit v prohlížeči systémovou aplikaci.

  • font: captionukázka písma caption
  • font: iconukázka písma icon
  • font: menuukázka písma menu
  • font: message-boxukázka písma message-box
  • font: small-captionukázka písma small-caption
  • font: status-barukázka písma status-bar

Další hodnoty ve Firefoxu

Firefoxu podporuje ještě další hodnoty systémových stylů s prefixem:

  • font: -moz-windowukázka písma -moz-window
  • font: -moz-documentukázka písma -moz-document
  • font: -moz-desktopukázka písma -moz-desktop
  • font: -moz-infoukázka písma -moz-info
  • font: -moz-dialogukázka písma -moz-dialog
  • font: -moz-buttonukázka písma -moz-button
  • font: -moz-pull-down-menuukázka písma -moz-pull-down-menu
  • font: -moz-list ukázka písma -moz-list
  • font: -moz-fieldukázka písma -moz-field

Styl písma v HTML

Před příchodem CSS se velikost, font a barva písma upravovaly prostřednictvím značek <font> a <basefont>:

<font>

Řádková značka pro změnu stylu textu přímo v HTML. Tento způsob nastavování písma, ačkoliv není doporučený, stále dobře funguje napříč prohlížeči:

<font size="6" color="red" face="sans-serif">
  Velký červený bezpatkový text
<font>

Živá ukázka

Podporuje 3 atributy:

  • size – velikost písma se udává hodnotami 1–7 (7 je největší)
  • color – barva písma (odpovídá CSS vlastnosti color)
  • face – použitý font (odpovídá CSS vlastnosti font-family)

Ačkoliv je <font> zavržený, občas se hodí a jeho použití mi přijde rozumné. Třeba v případě potřeby přebarvit text na konkrétní barvu mi přijde:

<font color="red">Červený text</font>

Elegantnější než správná varianta pomocí CSS:

<span style="color: red">Červený text</span>

<basefont>

Nastavení písma jedinou značkou pro celou stránku. Bez používání CSS to bylo docela elegantní, protože nemusel být každý text obalen samostatným <font>em, ale styl celé stránky se deklaroval na jednom místě.

<basefont face="Arial" color="red">

Značka je považována za zastaralou a není v prohlížečích moc podporovaná. Posledním prohlížečem, kde má vliv, je Internet Explorer 9. Ukázka.

Odkazy jinam