Sa kerid läbi veebisaitide voogu ja järsku on see seal. See täiuslik font, mida oled nädalaid otsinud. See konkreetne kaunistus väiketähel „a" ja proportsioonid, mis panevad sinu sisemise tüpograafi vaimustusest kilkama. Aga nimi? Saidi autor ei märgistanud seda, CSS-is tuhnimine võtab aega ja disaineri tugi on puhkusel.

Font ekraanil on CSS-i omadus, mitte pilt. Brauser annab ausalt üles nime, paksuse, suuruse ja isegi valukoja kõigile, kes teavad, kust vaadata. Viimastel aastatel on fondituvastustööriistad arenenud DevToolsi vahelehest laiendusteni, mis näitavad litsentsihindu, pakuvad tasuta alternatiive ja salvestavad leide kollektsiooni.

Selles juhendis viis meetodit: alates kohesest (paremklõps) kuni edasijõudnuteni (fondi binaarfaili analüüsimine). Ükski ei nõua disainiharidust ega tasulist tellimust.

💡 Kiirülevaade:

• Fontanello: paremklõps ja fondi nimi on juba kontekstimenüüs (Chrome, Firefox, Edge, iOS)
• WhatFont: liiguta kursor teksti kohale, näed perekonda, suurust, värvi ja edastusteenust (Chrome, Safari)
• Fonts Ninja: tuvastab fondi, näitab hinda, salvestab leiud järjehoidjatesse (Chrome)
• Sisseehitatud inspektor: universaalne meetod igale brauserile, ilma laiendusteta
• What Can My Font Do?: laadi fondifail üles, teenus dekodeerib isegi ümbernimetatud fondi

Meetodite võrdlus: tabel

1. Fontanello, font kontekstimenüüs

Fontanello, laiendus, mis lisab fondi nime otse brauseri kontekstimenüüsse. Tõsta tekst esile, tee paremklõps, vali Fontanello ja sa näed mitte ainult fondiperekonda, vaid ka paksust, suurust, tähevahet ja värvi. Ei mingeid lisapaneele, pole vaja tööriista tööriistaribal aktiveerida.

Laiendus töötab Chrome'is, Firefoxis, Edge'is ja iOS-is. See on kõigist olemasolevatest kiireim meetod: sõna otseses mõttes üks toiming. Pole vaja kursorit kuhugi liigutada, pole vaja DevToolsi vahelehtede vahel lülituda, paremklõps ja vastus on kohe sinu ees.

Plussid:

• Üks toiming: paremklõps ja tulemus kontekstimenüüs
• Toetab nelja platvormi: Chrome, Firefox, Edge, iOS
• Näitab lisaatribuute: suurus, värv, tähevahe

Miinused:

• Ei tuvasta ümbernimetatud fonte
• Ei salvesta leitud fontide ajalugu

Fontanello, valik neile, kes hindavad kiirust. Üks klõps, ei mingit aktiveerimist ega lisaliigutusi.

🔗 Fontanello Chrome'i veebipoes

2. WhatFont, hõlju kursoriga ja saa teada

WhatFont, üks populaarsemaid fondituvastuse laiendusi: kolm miljonit kasutajat ja hinnang 4,0 Chrome'i veebipoes. Põhimõte on lihtne: klõpsa WhatFonti ikoonil tööriistaribal, liiguta kursor teksti kohale ja lehe kohale ilmub paneel fondi täieliku teabega.

Erinevalt Fontanellost võimaldab WhatFont korraga esile tõsta mitu tekstifragmenti ja fonte visuaalselt võrrelda. Laiendus näitab fondiperekonda, paksust, suurust, reavahet ja värvi. Omaette pluss, see tuvastab fondi edastusallika: Google Fonts API, Adobe Fonts (endine Typekit) või lokaalne @font-face.

Plussid:

• Kolm miljonit kasutajat, stabiilne ja tõestatud laiendus
• Näitab fondi edastusteenust: Google Fonts, Adobe Fonts, lokaalne
• Töötab Chrome'is ja Safaris

Miinused:

• Nõuab aktiveerimiseks ikoonil klõpsamist, lisatoiming võrreldes Fontanelloga
• Firefoxi versiooni pole

🔗 WhatFont Chrome'i veebipoes

3. Fonts Ninja, disaineri Šveitsi armeenuga

Fonts Ninja läks lihtsast fondituvastusest kaugemale. Lisaks nimele ja CSS-i omadustele näitab laiendus: mitu stiili on leitud fondi jaoks saadaval, tootja-valukoja nime, litsentsi hinda ja, mis on eriti väärtuslik, sarnaste fontide loendit.

Sisseehitatud järjehoidjate süsteem säästab disainerite tunde. Leidsid kellegi teise saidilt huvitava fondi, salvestasid selle otse laiendusest kollektsiooni ja hiljem jagasid nimekirja meeskonnaga. Otsing töötab glüüfi kuju, litsentsitüübi ja hinna järgi, mugav, kui vajad kallile fondile soodsat alternatiivi.

Laiendust kasutab 900 tuhat inimest, hinnang 4,4. Töötab praegu ainult Chrome'is. Mahult on see raskem kui WhatFont, 2 MB versus 741 KB, kuid funktsionaalsus õigustab seda.

Plussid:

• Näitab fondi hinda, valukoda ja sarnaseid alternatiive
• Sisseehitatud järjehoidjad leitud fontidele
• Otsing glüüfi kuju ja litsentsitüübi järgi

Miinused:

• Ainult Chrome, puuduvad versioonid Safarile ja Firefoxile
• Raskem kui alternatiivid: 2 MB versus 741 KB WhatFontil

🔗 Fonts Ninja Chrome'i veebipoes

4. Sisseehitatud inspektor, universaalne meetod ilma laiendusteta

Kui sa ei soovi laiendusi paigaldada või töötad brauseris, mille jaoks neid pole, on igal kaasaegsel brauseril sisseehitatud tööriist fondituvastuseks. See on aeglasem kui laiendused, kuid ei nõua üldse paigaldamist.

Google Chrome. Tee tekstil paremklõps ja vali „Uuri". DevToolsi paneel avaneb. Vahekaardil Styles leia font-family omadus, see loetleb kõik elemendile rakendatud fondid. Esimene nimekirjas on see, mis parasjagu renderdab.

Firefox. Firefoxil on inspektoris spetsiaalne „Fondid" vahekaart. Paremklõps → „Uuri elementi" → mine Fondide vahekaardile. Sa näed mitte ainult fondi nime, vaid ka selle paksust, suurust ja isegi glüüfi eelvaadet, ühelgi laiendusel seda pole.

Safari. Esmalt luba „Arendus" menüü: Safari → Eelistused → Täpsemad → märgi „Kuva menüüribal Arendus-menüü". Nüüd tee tekstil paremklõps → „Uuri elementi". Külgribal vali „Stiilid, Arvutatud" ja leia font-family sektsioon.

Plussid:

• Pole midagi paigaldada, igasse brauserisse sisse ehitatud
• Firefox näitab Fondide vahekaardil glüüfi eelvaadet
• Töötab iga elemendi, mitte ainult teksti puhul

Miinused:

• Aeglasem kui laiendused: 10-30 sekundit versus kohene tulemus
• Ebamugav fontide massiliseks vaatamiseks lehel

5. What Can My Font Do?, ümbernimetatud fontide dekodeerimine

Tõsine takistus kõigile laiendustele ja inspektorile on ümbernimetatud font. Kui arendaja koostab kohandatud paketi, kaotab font-family nimi ühenduse originaaliga: Inter või Roboto asemel näed midagi nagu custom-font-3742. Laiendused on jõuetud, nad loevad CSS-i omadust, mitte faili ennast.

Lahendus on What Can My Font Do? teenus. Algoritm:

• Mine Chrome'i inspektori kaudu vahekaardile Application → Frames → Fonts. Leia fondifail, sobitades failinime sellega, mida näed font-family all.
• Ava fondifail uuel vahekaardil, see laaditakse alla.
• Lohista allalaaditud fail What Can My Font Do? aknasse. Teenus analüüsib binaarandmeid ja näitab: fondi tegelikku nime, valukoda, glüüfide arvu, keeletoetust, litsentsi ja kõiki märke tabeli kujul.

See ei ole kohene meetod, see nõuab minut või paar ja DevToolsi põhiteadmisi. Aga kui laiendused ümbernimetatud või kohandatud fondi vastu alt veavad, on What Can My Font Do? ainus toimiv meetod.

Plussid:

• Tuvastab ümbernimetatud fondid binaarfaili analüüsi kaudu
• Näitab täielikku teavet: glüüfid, keeled, litsents
• Tasuta veebiteenus, paigaldamine pole vajalik

Miinused:

• Aeglane: üks kuni kaks minutit fondi kohta
• Nõuab DevToolsi Application vahekaardi mõistmist

Video: kuidas fonti minutiga tuvastada

Vaata samm-sammulist õpetust kõigi viie meetodi kohta tegevuses, laiendustest inspektorini:

⁉️🤔 Korduma kippuvad küsimused

Kas fondilaiendused on ohutud? Kas nad ei kogu andmeid?

WhatFont, Fontanello ja Fonts Ninja ei kogu isikuandmeid ega edasta teavet külastatud saitide kohta. Chrome'i veebipoe kirjes WhatFonti kohta ütleb arendaja selgesõnaliselt: laiendus ei kogu ega kasuta kasutajaandmeid. Fonts Ninja küsib rohkem õigusi, kuid see on vajalik fondi järjehoidjatesse salvestamise funktsiooni toimimiseks.

Kas on võimalik teada saada kommertsfonti ja selle litsentsi hinda?

Fonts Ninja on ainus laiendus nimekirjast, mis näitab litsentsi hinda otse teksti kohal hõljumisel. Kommertsprojektide puhul säästab see tunde: pole vaja fonti eraldi MyFontsist või Adobe Fontsist otsida, et hinda teada saada.

Mida teha, kui font on tuvastatud, kuid seda ei saa alla laadida?

Veebisaitidel olevad fondid on peaaegu alati autoriõigusega kaitstud. Nime teadasaamine on seaduslik. Allalaadimine ja kasutamine ilma litsentsita ei ole. Kui font on kommertsfont (näiteks Linotype'i või Monotype'i kataloogist), osta litsents valukoja veebisaidilt. Tasuta fonte majutatakse kõige sagedamini Google Fontsis, neid võib vabalt igas projektis kasutada.

Miks Firefox näitab fonti, aga Chrome mitte?

See juhtub siis, kui font on ühendatud @font-face kaudu erinevates formaatides: WOFF2 Chrome'i jaoks, WOFF Firefoxi vanemate versioonide jaoks. Kui font ei kuvata Chrome'is, kontrolli DevToolsi konsooli Console vahekaardil: võib-olla on fondifail blokeeritud CORS-i poliitika poolt või ei laadinud reklaamiblokeerija tõttu.

Millise meetodi peaks valima front-end arendaja ja millise disainer?

Front-end arendajale on sisseehitatud inspektor mugavam, see on töövoos juba avatud, pole vaja ümber lülituda. Disainerile Fonts Ninja: näitab hinda, alternatiive ja võimaldab leide tulevaste projektide jaoks järjehoidjatesse salvestada. Ühekordseteks kontrollideks „mis font see on?" võta Fontanello, üks klõps ja vastus on kohe sinu ees.

Milline fondituvastustööriist valida?

Parim valik sõltub ülesandest. Kui oled front-end arendaja ja inspektor on juba avatud, püsi selles, Firefoxi Fondide vahekaart annab rohkem teavet kui ükski laiendus. Kui oled disainer, kes otsib viiteid, paigalda Fonts Ninja järjehoidjate, hindade ja sarnaste fontide pärast. Kiireteks kontrollideks on Fontanello kiiruse kuningas: paremklõps ja valmis.

Ja kui ükski laiendus ei saa hakkama, ümbernimetatud font, kohandatud ehitus, isetehtud pakett, laadi fail üles What Can My Font Do? fondianalüüsi teenusesse. See on viimane abinõu, mis alati töötab.