Obecné rodiny písem v CSS

click fraud protection

Typografický design hraje důležitou roli v designu webových stránek. Dobře rozložený a naformátovaný textový obsah pomáhá webu být úspěšnější tím, že vytváří zážitek ze čtení, který je příjemný i snadno použitelný. Součástí vašeho úsilí při práci s textem bude vybrat správná písma pro svůj design a poté pomocí CSS přidat tato písma a styly písem na zobrazení stránky. To se provádí pomocí tzv. A zásobník písem.

Stohy písem

Když vás určit písmo pro použití na webové stránce je osvědčeným postupem zahrnout také záložní možnosti pro případ, že by váš výběr písma nebyl nalezen. Tyto záložní možnosti jsou uvedeny v zásobník písem. Pokud prohlížeč nemůže najít první písmo uvedené v zásobníku, přesune se na další. Pokračuje v tomto procesu, dokud nenajde písmo, které může použít, nebo mu dojde volba (v takovém případě si vybere libovolné systémové písmo, které chce). Zde je příklad toho, jak by zásobník písem vypadal v CSS při použití na prvek „body“:

tělo {
rodina fontů: Georgia, "Times New Roman", patkové písmo;
}
instagram viewer

Písmo Georgia se zobrazí jako první, takže ve výchozím nastavení to stránka použije, ale pokud toto písmo z nějakého důvodu není k dispozici, stránka přejde zpět na Times New Roman.

Přiložit Times New Roman v uvozovkách, protože se jedná o víceslovné jméno. Názvy jednoslovných písem, například Georgia nebo Arial, uvozovky nevyžadují, ale víceslovný název písma s vloženými mezerami je potřebuje, aby prohlížeč věděl, že všechna tato slova obsahují název písma.

Zásobník písem končí slovem patkové. Jedná se o obecný název rodiny písem. V nepravděpodobném případě, že osoba nemá Gruzii nebo Times New Roman na svém počítači by stránka používala jakékoli patkové písmo, které by našla. Prohlížeč vybere písmo za vás, ale přinejmenším nabídnete pokyny, aby věděl, jaké písmo by v rámci návrhu fungovalo nejlépe.

Obecné rodiny písem

Obecný název písma dostupný v CSS je:

  • kurzívní
  • fantazie
  • jednoprostorový
  • patkové
  • bezpatkové

I když v oblasti webového designu a typografie je k dispozici mnoho dalších klasifikací písem, včetně slab-serif, blackletter, display, grunge a další, těchto pět obecných názvů písem jsou ty, které byste použili v zásobníku písem v CSS.

  • Kurzivní písma - často obsahují tenké, zdobené tvary písmen, které jsou určeny k replikaci efektního ručně psaného textu. Tato písma kvůli svým tenkým květnatým písmům nejsou vhodná pro velký blok obsahu, jako je textová kopie. Kurzivní písma se obecně používají pro nadpisy a kratší potřeby textu, které lze zobrazit ve větších velikostech písma.
  • Fantasy písma - jsou poněkud šílená písma, která opravdu nespadají do žádné jiné kategorie. Fonty, které replikují známá loga, jako jsou formy dopisů z Harry Potter nebo Zpět do budoucnosti filmy, spadejte do této kategorie. Tato písma nejsou vhodná pro obsah těla, protože jsou často tak stylizovaná, že je příliš obtížné číst delší pasáže textu napsaného těmito písmy.
  • Monospace písma - obsahují stejně velké a rozmístěné tvary písmen, jaké byste našli na starém psacím stroji. Na rozdíl od jiných písem, která mají proměnlivou šířku písmen v závislosti na jejich velikosti (například velká písmena Ž zabírá mnohem více místa než malá písmena i), monospace písma používají pevnou šířku pro všechny znaky. Tato písma se často používají pro odečítání kódu, protože vypadají výrazně odlišně od ostatního textu na této stránce.
  • Patková písma - použít trochu dalších ligatur na dopisních formách. Tyto extra kousky se nazývají patky. Běžná patková písma jsou Georgia a Times New Roman. Patková písma fungují skvěle pro velký text, jako je nadpis, i pro dlouhé pasáže textu a textu.
  • Bezpatkovépísma - nemají ligatury. Jméno znamená bez patek. Mezi oblíbená písma v této kategorii patří Arial nebo Helvetica. Podobně jako patková písma fungují bezpatková písma stejně dobře v nadpisech i v těle, i když některá odborníci dávají přednost tomu, aby se velké bloky textu vyhýbaly bezpatkovým písmům, protože jsou těžko čitelné v malém bodě velikosti.
instagram story viewer