Kuinka löytää verkkosivun fontin käyttämällä Inspect Element-työkalua ja selainlaajennuksia

sivustosi menestys riippuu suuresti sen ulkonäöstä. Ottaa oikea väriyhdistelmä ja teema pitää kävijöitä sivustossasi hieman kauemmin. Sivustosi väripaletin ja rakenteen lisäksi valitsemallasi fontilla on myös tärkeä rooli yleisön pitämisessä mukana.

ehkä törmäät kiinnostavaan sivustoon selatessasi internetiä, ja haluat tietää, mitä fontteja se käyttää. Online-laajennusten ja selaimesi sisäänrakennetun Inspect Element-työkalun avulla fontin tunnistaminen on nopeaa ja helppoa.

kuinka löytää kirjasimia käyttämällä Inspect Element Tool

jos et tiennyt, selaimesi sisäänrakennetulla Inspect Element-työkalulla voit tutkia verkkosivuston lähdekoodia. Voit ymmärtää suunnittelun elementtejä sivuston katsomalla sen CSS, HTML, ja muita tietoja. Se on hyvä tapa saada inspiraatiota suunniteltaessa oman sivuston.

fontin tunnistamisprosessi Inspect Element-työkalulla on melko yksinkertainen, etkä tarvitse koodaustaitoja. Tämä työkalu on saatavilla kaikissa selaimissa markkinoilla, ja jokaisella on samanlainen asettelu.

näin tunnistat fontin selaimen Inspect-työkalulla.

1. avaa verkkosivusto, jota haluat käyttää.
2. korosta teksti, jolla on tunnistettava fontti, ja napsauta sitä hiiren kakkospainikkeella.
3. Napsauta tutki kontekstivalikosta.
   

   

4. kun tarkasta-valikko avautuu, klikkaa Computed.
5. selaa alaspäin löytääksesi kirjasinperhe-osion. Täältä löydät fontin nimen ja tyylin sekä sen mitat.
   

   

muita tapoja käyttää Tarkastustyökalua

jos haluat nopeamman tavan löytää sivuston fontti Tarkastustyökalulla, kokeile tätä:

1. avaa verkkosivusto, jota haluat käyttää.
2. paina Ctrl + Shift + C (Macissa Cmd + Shift + C).
3. Näytä tekstin päällä kirjasintyyli, koko, värikoodi ja marginaali.
   

   

Voit myös tarkistaa verkkosivulla käytettyjen fonttien luettelon Tarkastustyökalulla. Näin tämä tehdään:

1. mene verkkosivulle.
2. avaa lähdekoodi painamalla Ctrl + Shift + I (Cmd + Shift + I Macissa).
3. napsauta Verkko-välilehteä ja valitse sitten Fontti-välilehti.
4. tässä on luettelo kaikista verkkosivulla käytetyistä fonteista.
   

   

saadaksesi luettelon kaikista fonteista reaaliajassa, saatat joutua päivittämään verkkosivun.

kirjasinten tunnistaminen Selainlaajennuksilla

jos haluat kätevämmän tavan fontin tunnistamiseen, kannattaa asentaa kirjasinlaajennus. Vaikka on olemassa useita selainlaajennuksia, jotka voivat auttaa tunnistamaan kirjasimia verkossa, kaksi suosituinta ovat WhatFont ja Font Finder.

Katsotaanpa prosessia fonttien tunnistamiseksi molempien laajennusten avulla.

WhatFont

WhatFont on laajalti suosittu tapa havaita useita fontteja nopeasti kerralla. Näin voit käyttää tätä työkalua.

1. kun WhatFont on käytössä selaimessasi, Näytä tekstin fontti hiiren osoittimella.
   

   

2. kun napsautat tekstiä, ponnahdusikkuna ilmestyy muiden fontin yksityiskohtien, kuten fontin koon, värin ja tyylin kanssa.
   

   

3. lisäksi voit valita useita tekstiosuuksia samanaikaisesti vertaillaksesi samalla sivulla olevia eri fontteja.
   

   

Lataa: WhatFont for Chrome / Firefox / Safari (ilmainen)

Font Finder

Font Finder näyttää myös fonttitiedot, kun viet minkä tahansa tekstin päälle verkkosivustolla. Kuitenkin, se tarjoaa paljon teknisiä yksityiskohtia, joten se voi saada hieman sekava, jos et ole perehtynyt web design.

tästä huolimatta Font Finder sopii paremmin web-kehittäjille, jotka haluavat korvata nykyiset fontit uusilla reaaliajassa. Näin fontteja on helppo testata ennen pysyvien muutosten tekemistä.

näin testaat fontin Font Finderin avulla:

1. Korosta osa tekstistä verkkosivulta.
2. napsauta sitä hiiren kakkospainikkeella ja valitse kontekstivalikosta Font Finder.
   

   

3. valitse Korvaa fontti ja anna kirjasimen nimi. Lisätään Calibri ja katsotaan, miten se muuttaa kirjasinta esikatselussa.
   

   

4. jos haluat palauttaa fontin, päivitä sivu.
   

   

Lataa: FontFinder for Chrome / Edge / Firefox (ilmainen)

entä fontin tarkistaminen Kuvassa?

jos haluat tunnistaa kuvan fontit, selainlaajennukset ja selaimen Tarkastustyökalu eivät välttämättä auta. Kuitenkin, voit kokeilla verkossa kuva tarkastaja työkaluja, kuten WhatFontIs, FontSquirrel, Fontspring, Whathefont, ja monet muut.

fontin tunnistamisprosessi kuvasta on pitkälti sama kaikissa työkaluissa. Yritetään tunnistaa fontti kuvan avulla Whathefont.

1. jos et ole vielä ehtinyt, lataa käytettävä kuva.
2. Tuo kuva Whathefontiin.
   

   

3. WhatTheFont tunnistaa automaattisesti kuvan tekstin. Kutista tai suurenna rajauslaatikkoa niin, että se ympäröi tunnistettavan fontin. Paina nuolinäppäintä, kun olet valmis.
   

   

4. WhatTheFont sitten vastaa kuvan fonttia sen galleriassa olevilla fonteilla, ja näyttää sinulle läheistä sukua olevat fontit.
   

   

5. jos et löydä hyvää vastinetta heti, voit pitää napsauttamalla Näytä lisää tuloksia nähdäksesi lisää aiheeseen liittyviä fontteja.
   

   

tunnista kirjasimet verkosta ja käytä niitä Suunnitteluissasi

fonteilla on merkittävä rooli verkkosivuston tai graafisen suunnittelun onnistumisessa. Jos törmäät kiehtovaan fonttiin selatessasi verkkoa, voit helposti havaita sen yllä olevilla menetelmillä.