Font
CSS vlastnost font slouží k nastavení písma na stránce.
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ísmofont-style: italic– kursivafont-style: oblique– zkosené 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ísmofont-variant: small-caps– malá 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-capsfont-variant-numericfont-variant-alternatesfont-variant-ligaturesfont-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: bold– tučné písmo
Kromě toho existuje možnost nastavit sílu písma na hodnoty z rozmezí 100–900. Výsledek potom hodně záleží na konkrétním písmu a prohlížeči.
font-weight: 100– ukázka síly 100font-weight: 200– ukázka síly 200font-weight: 300– ukázka síly 300font-weight: 400– ukázka síly 400 (odpovídá hodnotěnormal)font-weight: 500– ukázka síly 500font-weight: 600– ukázka síly 600font-weight: 700– ukázka síly 700 (odpovídá hodnotěbold)font-weight: 800– ukázka síly 800font-weight: 900– ukázka síly 900
Pokud daný font umí pouze normální písmo a tučné, bude cokoliv z rozsahu 100–500 normální a z 600–900 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: lighterfont-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-small– ukázka velikostixx-smallfont-size: x-small– ukázka velikostix-smallfont-size: small– ukázka velikostismallfont-size: medium– ukázka velikostimediumfont-size: large– ukázka velikostilargefont-size: x-large– ukázka velikostix-largefont-size: xx-large– ukázka velikostixx-large
Relativními klíčovými slovy
Písmo bude o stupeň větší/menší než velikost rodiče.
font-size: larger– ukázka velikostilargerfont-size: smaller– ukázka velikostismaller
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í.
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á.
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-serif– ukázka stylu sans-seriffont-family: serif– ukázka stylu seriffont-family: fantasy– ukázka stylu fantasyfont-family: cursive– ukázka stylu cursivefont-family: monospace– uká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;
}- MDN: Valid family names – jaké názvy zadané do
font-familyjsou platné
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: caption– ukázka písmacaptionfont: icon– ukázka písmaiconfont: menu– ukázka písmamenufont: message-box– ukázka písmamessage-boxfont: small-caption– ukázka písmasmall-captionfont: status-bar– ukázka písmastatus-bar
Další hodnoty ve Firefoxu
Firefoxu podporuje ještě další hodnoty systémových stylů s prefixem:
font: -moz-window– ukázka písma-moz-windowfont: -moz-document– ukázka písma-moz-documentfont: -moz-desktop– ukázka písma-moz-desktopfont: -moz-info– ukázka písma-moz-infofont: -moz-dialog– ukázka písma-moz-dialogfont: -moz-button– ukázka písma-moz-buttonfont: -moz-pull-down-menu– ukázka písma-moz-pull-down-menufont: -moz-list– ukázka písma-moz-listfont: -moz-field– uká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>Podporuje 3 atributy:
size– velikost písma se udává hodnotami 1–7 (7 je největší)color– barva písma (odpovídá CSS vlastnosticolor)face– použitý font (odpovídá CSS vlastnostifont-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.
Komentáře