Nástroják: Co je to za font?

Jak určit, jak se jmenuje písmo na obrázku nebo webu. Představíme vám několik užitečných nástrojů.

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

Často chceme zjistit, jaké písmo webová stránka používá nebo jaký font je například na obrázku.

Zjištění fontu z obrázku

Pro určení použitého fontu na základě obrázku existuje dobře funkční nástroj WhatTheFont.

Obrázek pro identifikaci písma je možné nahrát z disku nebo zadat URL z umístění na webu a následně ověřit, jestli se podařilo správně identifikovat na obrázku použitá písmena.

upresneni-znaku

Nástroj WhatTheFont pracuje velmi spolehlivě, ale samozřejmě se může stát, že písmo nenajde. Navíc v řadě případů nabídne více písem a finální určení proběhne ručně. Občas může být kvůli své popularitě přetížený.

Font použitý na stránce

Určení písma, kterým je napsán text webu, je potom z principu věci 100%. Do prohlížeče Chrome existují šikovné doplňky / pro ostatní prohlížeče jako bookmarklet.

Type Sample

Jedním z nich je Type Sample. Po aktivování režimu prohlížení (kliknutí na bookmarklet / ikonu pluginu) se při najetí nad element objeví použitý font.

type-sample

Když se na obsah klikne, je navíc možné daným písmem zkusit napsat vlastní text. To se může hodit třeba pro ověření, zda font umí češtinu v případě anglického webu a podobně.

type-sample-vlastni

Fontface Ninja

Velmi podobný je i nástroj Fontface Ninja, který umí i některé fonty stáhnout.

Občas má ale problémy správné písmo určit, třeba na této stránce.

font-face-ninja

Jiné způsoby

  1. Teoreticky je možné použité písmo vyčíst přímo z CSS souborů, ale kvůli dědičnosti to může být oříšek.
body {
  font-family: "Název písma";
}
  1. U netradičních písem (např. Google fontů) jde vypozorovat font na základě jeho připojení v sekci <head>:
    <link href='http://fonts.googleapis.com/css?family=Nazev+pisma' rel='stylesheet'>
  2. Další způsob je s použitím vývojářských nástrojů monitorovat část Síť/Network s stahování písem (záložka Fonts).
    devtools-fonts
  3. S využitím vývojářských nástrojů je nakonec snadné zjistit písmo i po kliknutí pravým tlačítkem na text a volbou Zkontrolovat prvek a v pravé částí si vybrat spočítané (Computed) styly. A tam najít CSS vlastnost font-family.
    devtools-computed
    Zjistit „spočítané“ hodnoty CSS umí i pár řádků JavaScriptu.

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 2

Přehled komentářů

m1c4a1 Font Finder
Ondřej Žára Re: Font Finder
Zdroj: https://www.zdrojak.cz/?p=13503