Zjištění, jaké fonty jsou použity na webové stránce, může být užitečné pro designéry, vývojáře a další profesionály, kteří se zabývají webovým designem. Existuje několik metod a nástrojů, které vám mohou pomoci identifikovat fonty na webu. Tento článek vám představí různé techniky a nástroje, jak zjistit, které fonty jsou použity na webové stránce.
1. Použití nástrojů v prohlížeči
1.1. Google Chrome
Google Chrome je oblíbený webový prohlížeč, který nabízí robustní nástroje pro vývojáře. Jedním z nich je „Inspektor“ (DevTools), který vám umožní snadno zjistit, jaké fonty jsou použity na webové stránce.
- Otevřete Google Chrome.
- Přístup k nástrojům pro vývojáře:
- Pravým tlačítkem klikněte na text na stránce a vyberte „Prozkoumat“ (Inspect).
- Nebo použijte klávesovou zkratku
Ctrl + Shift + I
(na Windows) neboCmd + Option + I
(na Macu).
- V pravém panelu DevTools přejděte na kartu „Computed“.
- V sekci „Font“ můžete vidět název použitého fontu.
1.2. Mozilla Firefox
Mozilla Firefox rovněž nabízí nástroje pro vývojáře, které umožňují zjistit informace o použitých fontech.
- Otevřete Mozilla Firefox.
- Přístup k nástrojům pro vývojáře:
- Pravým tlačítkem klikněte na text na stránce a vyberte „Prozkoumat“ (Inspect Element).
- Nebo použijte klávesovou zkratku
Ctrl + Shift + I
(na Windows) neboCmd + Option + I
(na Macu).
- V pravém panelu DevTools přejděte na kartu „Fonts“.
- Zde můžete vidět podrobné informace o použitých fontech na stránce.
2. Online nástroje
2.1. WhatFont
WhatFont je jednoduchý a efektivní nástroj, který vám umožní zjistit, jaké fonty jsou použity na webové stránce. WhatFont je dostupný jako rozšíření pro prohlížeče i jako online nástroj.
- Navštivte WhatFont.
- Nainstalujte rozšíření do svého prohlížeče.
- Po instalaci klikněte na ikonu WhatFont v prohlížeči.
- Umístěte kurzor myši nad text na stránce a WhatFont vám zobrazí název fontu.
2.2. FontFace Ninja
FontFace Ninja je další populární nástroj, který vám umožní identifikovat fonty na webových stránkách.
- Navštivte FontFace Ninja.
- Nainstalujte rozšíření do svého prohlížeče.
- Po instalaci klikněte na ikonu FontFace Ninja v prohlížeči.
- Umístěte kurzor myši nad text na stránce a FontFace Ninja vám zobrazí název fontu a další podrobnosti.
3. Analyzování zdrojového kódu stránky
Pokud nechcete instalovat žádné rozšíření, můžete zjistit informace o použitých fontech přímo z analyzování zdrojového kódu webové stránky.
3.1. Použití CSS
Webové stránky obvykle definují použité fonty pomocí CSS (Cascading Style Sheets). Můžete zkontrolovat soubory CSS, abyste zjistili, jaké fonty jsou použity.
- Pravým tlačítkem klikněte na stránku a vyberte „Zobrazit zdrojový kód“ (View Page Source).
- Hledejte tag
<link>
nebo<style>
, který obsahuje odkazy na CSS soubory. - Otevřete CSS soubory a hledejte vlastnost
font-family
.
3.2. Použití nástroje DevTools
Kromě výše zmíněného postupu v nástrojích pro vývojáře můžete také přímo analyzovat CSS stylování konkrétního elementu na stránce.
- Otevřete nástroje pro vývojáře (DevTools).
- Vyberte element, jehož font chcete zjistit.
- Na kartě „Styles“ hledejte vlastnost
font-family
.
4. Použití externích nástrojů a služeb
4.1. Identifont
Identifont je webová služba, která vám umožní identifikovat fonty na základě různých kritérií. Můžete zadat název fontu, popis jeho vzhledu, nebo nahrát obrázek s textem.
- Navštivte Identifont.
- Vyberte metodu identifikace, která vám nejlépe vyhovuje.
- Postupujte podle pokynů a Identifont vám poskytne informace o fontu.
4.2. Adobe Fonts (Typekit)
Adobe Fonts, dříve známý jako Typekit, nabízí rozsáhlou knihovnu fontů a také nástroje pro identifikaci fontů.
- Navštivte Adobe Fonts.
- Použijte funkci „Font Finder“ k identifikaci fontů na webových stránkách.
5. Mobilní aplikace
Existují také mobilní aplikace, které vám umožní identifikovat fonty pomocí fotoaparátu vašeho zařízení.
5.1. WhatTheFont
WhatTheFont je mobilní aplikace od MyFonts, která vám umožní identifikovat fonty pomocí fotografie.
- Stáhněte a nainstalujte aplikaci WhatTheFont na své mobilní zařízení.
- Otevřete aplikaci a pořiďte fotografii textu, jehož font chcete identifikovat.
- Aplikace analyzuje fotografii a poskytne vám název fontu.
Závěr: Existuje mnoho způsobů, jak zjistit, jaké fonty jsou použity na webové stránce. Od využití nástrojů v prohlížeči, přes online služby až po mobilní aplikace, máte k dispozici různé metody, které vám umožní identifikovat fonty rychle a efektivně. Vyberte si metodu, která vám nejlépe vyhovuje, a objevte svět webových fontů.
Co myslíš?
Zaslouží si tento příspěvek tvou reakci? Budeme rádi za každý komentář nebo hodnocení.