5 tapaa tunnistaa kirjasimet verkkosivulla

julkaissut Rob Hope Aloitussivun Tutorials 20. toukokuuta 2018

joten teet asiasi selaamalla web ja törmätä illest fontti combo, mutta et voi tunnistaa kirjasintyyppi? No tässä videossa (ja lista pyöräytys alla) näytän sinulle tarkalleen, miten löydät nuo fontit …

Fontanello (Chrome + Firefox)

Fontanello Chrome and Firefox Extension on mielestäni nopein tapa selvittää, mitä fonttia verkkosivu käyttää. Klikkaa tekstiä hiiren oikealla painikkeella, etsi Fontanello valikosta ja pow on fonttiperhe ja joitakin lisäominaisuuksia.

WhatFont (Chrome ja Safari)

WhatFont Chrome ja Safari-laajennus on suosikkivaihtoehtoni kirjasinlöydön suhteen. Aktivoidaksesi työkalun sinun täytyy klikata selaimen valikosta What Font-kuvaketta. Nyt voit valita useita osia tekstiä mahdollistaa paremman visualisoinnin fontti erittely vs Fontanello.

Näkötarkastaja (Kromi)

Näkötarkastaja kromi-laajennus tarjoaa hieman enemmän syvyyttä kuin edellä mainitut kaksi. Napsauta vain Chrome-valikon visuaalista tarkastaja-kuvaketta aktivoidaksesi työkalun ja siirry sitten pudotusvalikossa olevaan typografia-osioon. Sinulle esitellään nyt käytetyt kirjasinperheet sekä lisäksi erittely kaikista verkkosivun typografioista.

Good old Code Inspection (kaikki selaimet)

joten jos yrität välttää kymmenien selainlaajennusten asentamista, voimme löytää lisää käytetyistä fonteista vanhan kunnon kooditarkastuksen kautta:

jos käytät Google Chromea, napsauta hiiren kakkospainikkeella mysteeritekstiä, valitse tarkasta. DevTools ponnahtaa esiin, varmista, että olet Styles-välilehdessä ja suuntaa kirjasinperheen attribuutteihin saadaksesi lisätietoja fonteista.

jos käytät Firefoxia, napsauta tekstiä hiiren kakkospainikkeella ja valitse tarkasta Elementti. Heidän tarkastaja ponnahtaa, nyt suunnata kätevä fontit välilehti tarvitset tietoja.

jos käytät Safaria, varmista, että Kehittäjävalikko on näkyvissä valitsemalla Safarin Asetukset-välilehden alalaidasta. Napsauta tekstiä hiiren kakkospainikkeella ja valitse tarkasta Elementti. Avaa yksityiskohdat sivupalkissa, jos se on suljettu ja valitse Styles-Computed vaihtoehto. Kirjasinperhe-osiossa esitetään kirjasintiedot tyyli-attribuuttien sisällä.

paljasta uudelleen nimetyt fontit (advanced method)

este, jonka voimme kohdata, on, jos kirjasinperhettä ei ole selvästi nimetty, luonnollisesti heittää pois kirjasintarkastustyökalut ja-menetelmät. Aloitamme pelastustehtävän lataamalla fontin.

on olemassa useita tapoja tehdä tämä, mutta aloitan mainitsemalla nykyisen kirjasimen nimen. Avaa nyt Inspector-työkalu (käytän Google Chromea), suuntaa sovellus-välilehdelle ja selaa kehyksiä-osioon ja avaa fontit. Meidän täytyy sovittaa tiedoston nimi fontin nimi totesi aiemmin. Nyt Avaa että fontti uudessa välilehdessä ladata sen. Lopuksi vedämme että fontti tiedosto mahtava mitä minun fontti tehdä? verkkosivusto ja bam, fontti info on esitetty kauniisti.

Much love,
Rob
Twitter: @robhope
LinkedIn: @robhope
Email:

Vastaa

Sähköpostiosoitettasi ei julkaista.