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.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.