5 manieren om lettertypen in een webpagina te identificeren

gepubliceerd door Rob Hope in Landing Page Tutorials, op 20 mei 2018

dus je doet je ding surfen op het web en struikelen over de slechtste lettertype combo, maar je kunt het lettertype niet identificeren? Goed in deze video (en lijst round-up hieronder) Ik laat u precies zien hoe je die lettertypen te vinden…

Fontanello (Chrome + Firefox)

Fontanello Chrome en Firefox extensie, naar mijn mening, is de snelste manier om erachter te komen welk lettertype een webpagina gebruikt. Je klikt gewoon met de rechtermuisknop op de tekst, vindt Fontanello in het menu en pow daar is het lettertype familie en een aantal extra attributen.

WhatFont (Chrome en Safari)

WhatFont Chrome en Safari extensie is mijn favoriete optie als het gaat om font discovery. Om het gereedschap te activeren moet u op het pictogram wat lettertype in het browsermenu klikken. Nu kunt u meerdere delen van de tekst waardoor een betere visualisatie van het lettertype uitsplitsing vs Fontanello selecteren.

Visual Inspector (Chrome)

Visual Inspector Chrome Extension biedt iets meer diepte dan de bovenstaande twee. U klikt gewoon op het pictogram visuele inspecteur in het Chrome-menu om de tool te activeren, ga dan naar de sectie typografie in de dropdown. U wordt nu gepresenteerd met de lettertypefamilies gebruikt met een extra uitsplitsing van alle typografie binnen de webpagina.

good old code Inspection (alle Browsers)

dus als u probeert te voorkomen dat tientallen browserextensies worden geïnstalleerd, kunnen we meer vinden over de lettertypen die worden gebruikt door een good old code inspection:

als u Google Chrome gebruikt, klik met de rechtermuisknop op de mysterieuze tekst, selecteer inspecteren. DevTools verschijnt, Zorg ervoor dat u op het tabblad Stijlen en ga naar de Font-Family attributen om meer te leren over de lettertypen.

als u Firefox gebruikt, klik met de rechtermuisknop op de tekst, selecteer inspecteren Element. Hun Inspecteur verschijnt, ga nu naar het tabblad handige lettertypen voor de informatie die u nodig hebt.

als u Safari gebruikt, controleer dan of het menu Ontwikkelaar zichtbaar is door het vakje onderaan het tabblad Geavanceerd van Safari-voorkeuren aan te vinken. Klik nu met de rechtermuisknop op de tekst, selecteer inspecteer Element. Open de details zijbalk als het is gesloten en selecteer de Styles-Computed optie. De sectie font-family toont de lettertypeinfo binnen de stijlattributen.

ontrafel hernoemde lettertypen (geavanceerde methode)

een obstakel waarmee we geconfronteerd kunnen worden is wanneer een lettertypefamilie niet duidelijk een naam heeft, op natuurlijke wijze het gereedschap en de methoden voor het inspecteren van lettertypen weggooien. We beginnen de bergingsmissie door het lettertype te downloaden.

er zijn verschillende manieren om dit te doen, maar ik begin met het noteren van de huidige naam van het lettertype. Open nu de Inspector tool (Ik gebruik Google Chrome), ga naar het tabblad toepassing en scroll naar de Frames sectie en Open lettertypen. We moeten de bestandsnaam matchen met de lettertypenaam die eerder is opgemerkt. Open nu dat lettertype in een nieuw tabblad om het te downloaden. Tot slot slepen we dat lettertype bestand in de awesome wat kan mijn lettertype doen? website en bam, de font info wordt prachtig gepresenteerd.

veel liefde,
Rob
Twitter: @robhope
LinkedIn: @robhope
Email:

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.