så du gör din sak surfa på webben och snubblar på den illest font combo men du kan inte identifiera typsnittet? Tja i den här videon (och lista round-up nedan) visar jag dig exakt hur du hittar dessa teckensnitt…
Fontanello (Chrome + Firefox)
Fontanello Chrome och Firefox Extension, enligt min mening, är det snabbaste sättet att ta reda på vilket teckensnitt en webbsida använder. Du högerklickar helt enkelt på texten, hittar Fontanello i menyn och pow det finns typsnittsfamiljen och några ytterligare attribut.
WhatFont (Chrome och Safari)
WhatFont Chrome och Safari Extension är mitt favoritalternativ när det gäller font discovery. För att aktivera verktyget måste du klicka på ikonen vad teckensnitt i webbläsarens meny. Nu kan du välja flera delar av text som möjliggör en bättre visualisering av teckensnittet vs Fontanello.
Visual Inspector (Chrome)
Visual Inspector Chrome Extension erbjuder lite mer djup än ovanstående två. Du klickar helt enkelt på Visual Inspector-ikonen i Chrome-menyn för att aktivera verktyget och går sedan över till avsnittet typografi i rullgardinsmenyn. Du presenteras nu med teckensnittsfamiljerna som används med en ytterligare uppdelning av all typografi på webbsidan.
bra gammal Kodinspektion (alla webbläsare)
så om du försöker undvika att installera dussintals webbläsartillägg kan vi hitta mer om de teckensnitt som används genom en bra gammal kodinspektion:
om du använder Google Chrome, högerklicka på mysterietexten, välj Inspektera. DevTools dyker upp, se till att du är på fliken stilar och gå till Teckensnittsfamiljattributen för att lära dig mer om teckensnitten.
om du använder Firefox, högerklicka på texten, välj Inspektera Element. Deras inspektör dyker upp, gå nu till fliken praktiska teckensnitt för den information du behöver.
om du använder Safari, se till att utvecklarmenyn är synlig genom att markera rutan längst ner på fliken Avancerat i Safari-Inställningar. Högerklicka nu på texten, välj Inspektera Element. Öppna detaljfältet om det är stängt och välj alternativet Styles – Computed. Avsnittet font-family presenterar teckensnittsinfo i stilattributen.
avslöja bytt namn teckensnitt (avancerad metod)
ett hinder som vi kan möta är när en typsnittsfamilj inte tydligt heter, naturligtvis kasta bort font Inspektionsverktyg och metoder. Vi startar räddningsuppdraget genom att faktiskt ladda ner teckensnittet.
det finns flera sätt att göra detta men jag börjar med att notera det aktuella teckensnittsnamnet. Öppna nu Inspektörsverktyget (jag använder Google Chrome), gå till fliken Program och bläddra till avsnittet ramar och öppna teckensnitt. Vi måste matcha filnamnet med teckensnittsnamnet som noterats tidigare. Öppna nu det teckensnittet i en ny flik för att ladda ner det. Slutligen drar vi den typsnittsfilen till det fantastiska vad kan mitt teckensnitt göra? webbplats och bam, font info presenteras vackert.
mycket kärlek,
Rob
Twitter: @ robhope
LinkedIn: @ robhope
e-post: