Přejít k navigační liště

Zdroják » Webdesign » Jak na systémová písma

Jak na systémová písma

Články Webdesign

Jak a proč používat lokální písma dostupné v operačních systémech.

Článek původně vyšel na autorově webu Je čas.

Pokud nestačí, aby se texty zobrazovaly základním patkovým (font-family: serif) nebo bezpatkovým (font-family: sans-serif) písmem – typicky Times New Roman a Arial, existují dvě možnosti:

  1. Připojit externí písmo pomocí @font-face.
  2. Použít písmo systémové.

Výhody systémových fontů

Nové operační systémy nabízejí velmi kvalitní fonty, které:

  1. Není nutné stahovat, protože už je návštěvník má nainstalované. Zvlášť na pomalém mobilním přípojení jsou externí fonty kvůli rychlosti problematické.
  2. Jsou dostupné zdarma (pro účely použití v CSS vlastnosti font-family).
  3. Dodají stránce vzhled nativní aplikace.

Zásadní problém může být v tom, že různé operační systémy mají hlavní systémové písmo jiné. Stránka používající systémový font se tak vizuálně bude lišit napříč operačními systémy a prohlížeči.

Použití UI fontů

Zápis používající výchozí systémové písmo, který je univerzální pro různé operační systémy (Windows, Linux, OS X).

font-family:
  -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif;

Například GitHub používá od poloviny roku 2016 následující předpis:

font-family: 
  -apple-system, BlinkMacSystemFont, 
  "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Pořadí je důležité, protože některé systémové fonty jednoho OS se poměrně často vyskytují i v jiném OS. Třeba systémové písmo Windows – Segoe UI se může snadno dostat na OS X při instalaci Microsoft Office.

Systémové písmo Androidu – Roboto potom budou mít dostupné třeba androidoví vývojáři ve Windows.

Možné problémy

Fonty spoléhající se na dostupnost v operačním systému trpí rizikem, že nějaký uživatel bude mít špatnou verzi daného fontu. Seznam dostupných písem se hodně liší napříč OS a uživateli, takže se docela složitě testuje.

Při použití názvu specifického fontu jeden nikdy neví, kterého kostlivce tím vytáhne ze skříně. Následující článek popisuje nechtěné nastavení písma na systémové písmo z Windows 3.0.

V případě Windows a OS X by výše uvedený seznam měl být poměrně spolehlivý, na Linuxu ale může dojít k potížím.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.