Jak změnit font v CSS?

Jazyk stylů: Překvapivě snadná změna fontu v CSS

Často se stává, že chceme na našich webových stránkách dosáhnout specifického vzhledu. Ať už jde o elegantní titulky, čitelný text v těle stránky, nebo výrazné zvýraznění, správný font hraje klíčovou roli. Naštěstí je změna fontu v CSS překvapivě jednoduchá a nabízí široké možnosti individualizace. Na rozdíl od rozšířených návodů, které se soustředí pouze na elementární změny, se tento článek zaměří na komplexnější přístup a odhalí nuance, které vám pomohou dosáhnout požadovaného efektu.

Zapomeníme na zastaralé rady a zaměříme se na moderní a efektivní techniky. Místo pouhého zmínění font-weight, se ponoříme hlouběji do bohatství vlastností, které CSS pro manipulaci s fonty nabízí. Nejde jen o tloušťku písma, ale o celkovou jeho charakteristiku.

Základní vlastnosti pro ovládání fontu:

CSS nabízí několik základních vlastností, které samostatně, ale i v kombinaci, umožňují detailní kontrolu nad vzhledem písma:

• font-family: Tato vlastnost určuje samotný typ písma, například Arial, Times New Roman, Verdana nebo Roboto. Je důležité uvést i záložní fonty oddělené čárkami, pro případ, že prohlížeč požadovaný font nenajde. Příklad: font-family: "Arial", sans-serif;. sans-serif určuje generický font bez patky, který se použije, pokud Arial není dostupný.

• font-size: Nastavuje velikost písma, například 16px, 1.2em (relativní k velikosti nadřazeného prvku) nebo 1rem (relativní k velikosti kořenového prvku).

• font-weight: Určuje tloušťku písma, jak bylo zmíněno v zadání. Kromě slov jako normal, bold, bolder a lighter, lze použít i číselné hodnoty od 100 do 900 (400 = normal, 700 = bold).

• font-style: Určuje styl písma, například normal (normální), italic (kurzívou) nebo oblique (šikmo, podobné kurzívě, ale může se lišit v závislosti na fontu).

• font-variant: Umožňuje nastavit varianty písma, jako je normal (normální) nebo small-caps (malá velká písmena).

Příklad komplexního použití:

Následující kód demonstruje použití výše uvedených vlastností pro vytvoření stylizovaného nadpisu:

h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  font-weight: 700;
  font-style: normal;
  font-variant: normal;
  color: #333; /* Bonus: Barva textu */
}

Tento kód nastaví nadpis <h1> tak, aby používal font "Open Sans", velikost 3em, tučné písmo (700), normální styl a normální variantu písma. Barva textu je tmavě šedá.

Závěr:

Změna fontu v CSS je mocný nástroj pro vytváření atraktivních a čitelných webových stránek. Důkladné pochopení výše uvedených vlastností a jejich vzájemné interakce vám umožní dosáhnout perfektního vzhledu pro vaše textové prvky a posune vaše designérské schopnosti na novou úroveň. Nebojte se experimentovat s různými kombinacemi a objevovat tak neomezené možnosti, které CSS nabízí.