FontLens

Sambungan percuma untuk Chrome

Fon apa ini? Klik kanan dan lihat CSS

Pilih teks di mana-mana laman web, klik kanan dan pilih Inspect font with FontLens. Pemeriksa fon akan dibuka di atas halaman dengan family, saiz, ketebalan, tinggi baris dan warna, CSS untuk disalin serta butang muat turun fon.

Tambah ke Chrome — percuma

Juga berfungsi dalam Edge, Brave, Opera dan pelayar Chromium lain.

Pemeriksa FontLens: contoh Ag antara panduan cap-height, x-height dan baseline, sifat fon serta petikan Tailwind

Sepintas lalu

Fungsi
Memaparkan fon teks pilihan anda: family, saiz, ketebalan, tinggi baris, warna dan gaya lain yang berbeza daripada tetapan lalai, bersama CSS untuk disalin.
Cara bermula
Pilih teks, klik kanan dan pilih Inspect font with FontLens. Menu hanya muncul apabila teks dipilih.
Salin sebagai
CSS, SCSS, SASS atau Tailwind, dengan saiz dalam px, rem, pt atau em.
Fail fon
Download font mendapatkan fon web daripada sumber @font-face. Semak lesen fon sebelum menggunakannya.
Untuk siapa
Pereka web, pembangun front-end, juruaudit kebolehcapaian dan pelajar CSS.
Harga
Percuma. Tiada akaun atau versi berbayar.
Data
Berjalan dalam pelayar anda. Tiada pelayan atau analitik. Satu-satunya permintaan rangkaian ialah muat turun fon yang anda mulakan.
Berfungsi pada
Chrome dan pelayar Chromium lain yang memasang sambungan daripada Chrome Web Store. Firefox dan Safari tidak disokong.
Had
Membaca CSS teks sebenar pada laman web. Bukan teks dalam imej, kanvas, PDF atau halaman Chrome sendiri.
Versi
2.2.0, dikemas kini 23 Oktober 2026

Dua klik untuk mengetahui fon

  1. 1

    Pilih teks

    Tajuk, perenggan atau label butang pada mana-mana laman web.

  2. 2

    Klik kanan

    Pilih Inspect font with FontLens. Pemeriksa terbuka di atas halaman dengan family, saiz, ketebalan, tinggi baris dan warna.

  3. 3

    Salin atau ubah

    Salin CSS atau Tailwind, cuba saiz atau warna lain dalam pratonton langsung, atau muat turun fail fon.

Sebab orang menggunakannya

Aa

Kenal pasti typeface

Terjumpa tajuk yang anda suka? Pilihnya untuk melihat family, ketebalan dan sumber fon: Google Fonts, Adobe Fonts atau laman itu sendiri.

{ }

Padankan mockup

Bandingkan nilai pada laman langsung dengan fail reka bentuk, kemudian salin peraturannya sebagai CSS, SCSS, SASS atau Tailwind.

4.5:1

Semak kontras

Lihat nisbah kontras dengan tanda AA dan AAA, kemudian cuba teks lebih gelap atau latar lebih cerah sebelum reka bentuk diterbitkan.

Apa yang boleh dibuat

  • Spesimen dengan panduan

    Family pertama dalam stack, dipaparkan antara panduan cap-height, x-height dan baseline yang diukur daripada fon itu sendiri.

  • format petikan

    CSS, SCSS, SASS dan Tailwind. Salin seluruh petikan atau satu baris; format terakhir anda akan diingati.

  • Unit pilihan

    Paparkan saiz dalam px, rem, pt atau em pada medan dan petikan. rem mengikut saiz root halaman.

  • Sumber fon

    Lencana menunjukkan asal fon: Google Fonts, Adobe Fonts, hos sendiri atau fon sistem pada komputer anda.

  • Semakan kontras

    Nisbah antara teks dan latar dengan tanda AA dan AAA untuk teks biasa atau besar, dikemas kini apabila warna berubah.

  • Download font

    Mendapatkan fail daripada sumber @font-face dan menamakannya mengikut family. Jika pelayan menyekatnya, sumber dibuka dalam tab baharu.

Mengapa cari fon dalam DevTools mengambil masa?

Halaman menyenaraikan fon dan pelayar menggunakan fon pertama yang tersedia. Untuk mengetahuinya, buka DevTools, cari elemen, baca panel Computed, kemudian cari fail fon dalam panel Network. Saiz, ketebalan, tinggi baris dan warna berada di tempat berasingan.

FontLens membaca gaya terkomputasi teks pilihan anda dan meletakkannya dalam satu panel: stack family, spesimen family pertama, nilai, sumber fon dan CSS. Ia membaca CSS halaman, jadi tidak dapat menamakan fon dalam imej.

Tiada apa-apa meninggalkan pelayar anda

  • Tiada akaun atau pelayan

    FontLens berjalan dalam pelayar anda. Tiada analitik atau penjejakan.

  • Membaca pilihan anda

    Pemeriksa membaca gaya teks yang anda klik kanan. Maklumat halaman tidak dihantar ke mana-mana.

  • Empat kebenaran

    Menu konteks untuk pilihan klik kanan, tab aktif dan akses halaman supaya pemeriksa boleh dibuka, serta storan untuk teks contoh, unit dan format petikan.

Chrome DevTools berbanding FontLens

Chrome DevTools berbanding FontLensChrome DevToolsFontLens
Lihat fon bagi teksPeriksa elemen dan buka panel ComputedPilih teks, klik kanan, satu pilihan menu
Salin sebagai Tailwind atau SCSSTidak, salin nilai satu demi satuTab CSS, SCSS, SASS atau Tailwind
Asal fonCari fail fon dalam panel NetworkLencana: Google Fonts, Adobe Fonts, hos sendiri atau sistem
Muat turun fail fonCari dalam Network atau Sources dan simpanSatu butang
Semak kontrasDalam pemilih warna panel StylesTanda AA dan AAA di sisi pratonton langsung
HargaSedia terbinaPercuma

Soalan

Bagaimanakah saya tahu fon yang digunakan laman web?

Tambah FontLens pada Chrome, pilih teks di laman itu, klik kanan dan pilih Inspect font with FontLens. Anda akan melihat font family, saiz, ketebalan, tinggi baris, warna dan sumber fon.

Bagaimanakah saya menyalin CSS fon daripada laman web?

Dalam pemeriksa, pilih tab CSS, SCSS, SASS atau Tailwind dan tekan Copy all, atau salin satu baris. Tukar unit kepada px, rem, pt atau em dahulu jika perlu.

Bolehkah saya memuat turun fon daripada laman web?

Jika teks menggunakan fon web, Download font mendapatkan fail daripada sumber @font-face. Fon sistem tiada fail untuk dimuat turun. Semak lesen fon sebelum menggunakannya dalam projek anda.

Bolehkah FontLens mengenal pasti fon dalam imej atau PDF?

Tidak. Ia membaca CSS teks sebenar pada laman web, jadi tidak dapat menamakan fon dalam imej, kanvas atau PDF.

Bagaimanakah saya menyemak kontras teks untuk WCAG?

Pratonton menunjukkan nisbah kontras antara warna teks dengan latar, bersama tanda AA dan AAA untuk teks biasa dan besar. Ubah mana-mana warna untuk mengemas kini tanda.

Bolehkah saiz dipaparkan dalam rem dan bukannya px?

Boleh. Tukar unit kepada px, rem, pt atau em; medan dan petikan akan mengikutinya. rem dikira daripada saiz fon root halaman dan pilihan anda akan diingati.

Adakah percuma? Adakah data dikumpulkan?

Percuma dan tanpa akaun. Tiada pelayan atau analitik; satu-satunya permintaan rangkaian ialah muat turun fon yang anda mulakan.

Adakah ia berfungsi dalam Edge, Brave atau Opera?

Kebanyakan pelayar Chromium boleh memasang sambungan daripada Chrome Web Store, termasuk Edge, Brave, Opera dan Vivaldi. Firefox dan Safari tidak disokong.

Lagi sambungan percuma daripada PYROCTAL

Fon apa itu? Dua klik sahaja.

Tambah ke Chrome — percuma