O webu
Jak zjistit název fontu

Č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

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.

Ruční upřesnění znaků

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 ale může být kvůli své popularitě přetížený.

Fontspring Matcherator

Fontspring Matcherator

Velmi spolehlivý nástroj pro určení fontu. Obrázek s písmem k rozpoznání jde vložit pomocí URL nebo nahrát z disku.

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

Type Sample

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

Zobrazení použitého písma

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ě.

Otestování písma

Fontface Ninja

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.

Fontface 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.

  2. body {
      font-family: "Název písma";
    }
  3. 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'>
  4. 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).

    Zobrazení načtených písem

  5. 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.

    Zobrazení výsledného písma

    Zjistit „spočítané“ hodnoty CSS umí i pár řádků JavaScriptu.

  6. Ve vývojářských nástrojích Firefoxu je u prozkoumávání prvků stránky přímo volba Písma, která rovnou zjistí použitý font. Napíše i informaci, jestli je písmo systémové nebo vzdálené (např. Google Font). Tato funkce umí i vypsat všechny písma použitá na stránce.

    Zjištění použitého fontu ve Firefoxu