#1 Vlastnosti s prefixem font
Vlastnosti obsahující předponu font- souvisejí s modifikacemi a stylizací textu. I přes název, vlastnosti font nemodifikují pouze textový font, ale také velikost písma nebo jeho tloušťku.
Existuje přes 20 vlastností s prefixem font-, v tomto článku si projdeme ty nejčastěji používané.
Zkrácená vlastnost font
Existuje také jednoduchá vlastnost font, která může obsahovat údaje všech svých souvisejících vlastností, aby se neprodlužoval kód. Jestliže se ve vlastnosti nachází vícero údajů, musí být seřazeny v tomto pořadí:
* {
font: style weight size/line-height family;
}
#2 Vlastnost font-family
Vlastnost font-family definuje, jaký font bude použit. Umožňuje nastavit také takzvaný „fallback font“, který se aplikuje, pokud prohlížeč nenalezne hlavní font, který chceme použít. V tabulce se nachází seznam základních rodin písma, které má většina prohlížečů přednastavené a lze je tak použít jako fallback fonty.
| Font | Popis |
|---|---|
| serif | „Formální“ font, který má serify (někdy nepřesně patky) |
| sans-serif | Rovné a čisté fonty bez jakýchkoli doplňků |
| monospace | Font, kde mají všechna písmena stejnou šířku na styl psacího stroje |
| cursive | Podobné písmu psaného rukou |
| fantasy | Font, který má různé doplňky a modifikace |
Chceme-li aplikovat vlastní font, lze jej importovat například z Google Font nebo jej lze stáhnout do adresáře. Fonty z Google Fonts se vkládají do HTML hlavičky (návod se nachází na jejich stránce), zatímco stažené fonty se vkládají do CSS pomocí selektoru @font-face.
/* Stažený font importovaný přes CSS */
@font-face {
font-family: 'Quicksand'; /* Definování názvu */
src: url('font/Quicksand-Light.ttf'); /* Cesta k souboru v adresáři */
}
Následně lze prvku aplikovat vlastní font (zde také s fallback fontem):
font-family: Quicksand, sans-serif;
#3 Tloušťka písma
Vlastnost font-weight definuje, jaká bude tloušťka použitého písma. Může obsahovat klíčová slova lighter, normal, bolder, bold anebo stovkové hodnoty 100–900, kde 100 je nejtenčí písmo a 900 nejhrubší.
font-weight: 800;
#4 Velikost písma
Pomocí vlastnosti font-size lze nastavit velikost písma. Hodnota je číslo s jednotkou, kde se nejčastěji používá jednotka px, em nebo vw.
Jednotka px je absolutní jednotka – je pevně daná. Častěji používaná jednotka em, je relativní jednotka, která závisí na základní velikosti fontu (ve většině případů se jedná o 16px, tedy 1em = 16px). Chceme-li font responzivní, lze použít jednotku vw, která nabývá hodnot 1–100; jedná o procentuální hodnotu z šířky obrazovky.
font-size: 30px;
font-size: 2em;
font-size: 10vw;