FontLens

Pilih teks apa pun, klik kanan, dan segera periksa font, ukuran, ketebalan, warna, dan CSS-nya — salin, sesuaikan, pratinjau, dan…

Pernah mendarat di suatu halaman, mengagumi tulisannya, dan bertanya-tanya "font apakah ini?" FontLens menjawab pertanyaan itu hanya dengan sekali klik. Pilih teks apa pun di situs web mana pun, klik kanan, dan pilih "Inspect font with FontLens". Sebuah panel yang bersih dan terfokus akan terbuka tepat di atas halaman dan menampilkan dengan tepat bagaimana teks tersebut ditata: jenis huruf, ukuran, ketebalan, tinggi baris, warna, dan setiap detail lainnya di balik desain. Baik Anda seorang desainer yang merekayasa ulang tata letak, pengembang yang mencocokkan spesifikasi, atau sekadar ingin tahu tentang judul yang indah, alat ini mengubah setiap halaman web menjadi buku tipografi terbuka. FontLens adalah pencari font dan pemeriksa CSS yang tergabung dalam satu alat. Alat ini tidak hanya memberi nama font-family untuk Anda, tetapi juga memberikan kode siap pakai, tempat uji coba interaktif untuk menguji ide, dan alat aksesibilitas untuk memastikan teks Anda mudah dibaca. Tanpa akun. Tanpa pendaftaran. Cukup pilih, klik kanan, dan periksa. 🔍 Apa yang bisa Anda lakukan - Mengungkap tipografi lengkap dari setiap kata yang dipilih: font-family, font-size, font-weight, line-height, dan warna secara sekilas - Melihat gaya tambahan yang mudah terlewat, seperti letter-spacing, text-transform, dan font-style - Menyalin properti tunggal apa pun dengan satu klik, atau mengambil seluruh kumpulan aturan sebagai cuplikan CSS lengkap - Mengubah cuplikan itu ke Tailwind, SCSS, atau SASS melalui tab sederhana, lalu menyalin seluruhnya atau baris demi baris - Bereksperimen dalam pratinjau langsung yang dapat diedit: menulis ulang contoh kata, mengubah nilai, menukar latar belakang, dan melihatnya diperbarui secara instan - Mengidentifikasi dari mana font web berasal dengan lencana penyedia (Google Fonts, Adobe Fonts, dihosting sendiri, atau jenis huruf sistem bawaan) - Menyimpan font web ke komputer Anda dengan tombol "Download font", ditarik langsung dari sumbernya sendiri - Memeriksa kontras warna terhadap standar WCAG, dengan rasio tepat plus hasil lulus atau gagal AA dan AAA - Memilih dan mengambil sampel warna dengan pemilih penuh, termasuk penetes mata untuk mengambil piksel apa pun di layar - Mengganti unit pengukuran antara px, rem, pt, dan em, diterapkan pada bidang dan kode yang diekspor 🖱️ Cara kerjanya Menggunakan FontLens hanya membutuhkan waktu beberapa detik. Sorot kata-kata yang ingin Anda pelajari, klik kanan pada pilihan, dan pilih "Inspect font with FontLens" dari menu. Panel akan muncul di atas halaman saat ini, ditata dengan rapi sehingga tidak pernah bertabrakan dengan tampilan situs itu sendiri. Dari sana Anda dapat membaca detailnya, menyalin apa yang Anda butuhkan, atau mulai mengedit. Pratinjau langsung adalah tempat kesenangan dimulai. Ubah kata-kata untuk menguji judul yang sebenarnya, sedikit ubah ukuran, sesuaikan berat, atau atur warna latar belakang baru untuk melihat bagaimana jenisnya bertahan. Editan Anda akan tetap ada saat Anda berpindah antar halaman dan kembali nanti, sehingga ide yang Anda mulai di satu situs akan menunggu Anda di situs berikutnya. Saat Anda ingin mengembalikan nilai asli, tombol "Reset to site" mengembalikan semua yang sebenarnya digunakan halaman. Butuh aset mentah? Untuk font web yang dapat diunduh, satu tombol mengambil file asli dari lokasi @font-face-nya. Untuk jenis huruf yang sudah dikirimkan dengan sistem operasi Anda, FontLens memberi tahu Anda bahwa itu adalah font bawaan, sehingga Anda tahu itu tersedia tanpa unduhan apa pun. 🔒 Privasi utama FontLens berjalan sepenuhnya di dalam browser Anda. Tidak ada pengumpulan data, tidak ada pelacakan, tidak ada analitik, dan tidak ada server eksternal yang terlibat dalam pemeriksaan teks. Semua yang Anda periksa tetap ada di komputer Anda. Ekstensi ini membuat tepat satu permintaan jaringan, dan hanya ketika Anda sengaja menekan "Download font", pada saat itu ia akan menghubungi sumber font itu sendiri untuk mengambil file. Tidak ada hal lain yang meninggalkan perangkat Anda. Izin sengaja ditetapkan secara sempit. Izin menu konteks menambahkan entri klik kanan. Izin tab aktif memungkinkan alat membaca teks yang Anda pilih di tab tempat Anda memanggilnya, dan tidak di tempat lain. Penyimpanan menyimpan teks pratinjau Anda serta preferensi unit dan format Anda sehingga diingat lain kali. Tidak ada akses luas ke riwayat penjelajahan Anda dan tidak ada izin host yang menyeluruh. 👥 Untuk siapa ini - Desainer web yang ingin mengidentifikasi jenis huruf, mengambil palet, dan menggunakan kembali gaya dengan cepat - Pengembang front-end yang mencocokkan mockup atau mengangkat nilai font-family dan spasi yang tepat ke dalam kode - Insinyur UI dan UX yang membangun sistem jenis yang konsisten dan selaras dengan merek - Siswa yang belajar CSS dan tipografi yang ingin melihat bagaimana situs nyata dibangun - Auditor aksesibilitas yang memverifikasi bahwa teks memenuhi persyaratan kontras WCAG sebelum dirilis - Blogger, pemasar, dan pembaca yang penasaran yang hanya ingin tahu font apa yang digunakan situs ✨ Mengapa orang terus menggunakannya - Satu klik kanan memberi Anda jawaban alih-alih menggali melalui alat pengembang - Kode siap disalin dalam CSS biasa, Tailwind, SCSS, atau SASS, sehingga dapat langsung masuk ke proyek Anda - Pratinjau yang dapat diedit memungkinkan Anda membuat prototipe pilihan jenis tanpa menyentuh satu baris kode pun - Pemeriksa kontras membangun aksesibilitas ke dalam alur kerja Anda daripada membiarkannya sebagai pemikiran belakangan - Pemilih warna dan penetes mata berarti Anda dapat mengambil sampel dan menggunakan kembali warna yang tepat dari mana saja di halaman - Tema terang dan gelap mengikuti sistem operasi Anda secara otomatis, sehingga terasa nyaman siang atau malam - Pengalihan unit antara px, rem, pt, dan em menjaga keselarasan output dengan cara kode dasar Anda ditulis 🎨 Lihat lebih dekat detailnya Tipografi lebih dari sekadar nama. FontLens menampilkan keputusan kecil yang membuat teks terasa tepat, dari ketebalan judul hingga ruang bernapas dalam line-height dan pelacakan halus dari letter-spacing. Melihat nilai-nilai ini secara berdampingan membantu Anda memahami mengapa suatu desain berfungsi dan bagaimana mereproduksinya. Lencana penyedia juga menambah konteks, memberi tahu Anda secara sekilas apakah Anda melihat aset Google Fonts, wajah Adobe Fonts, file yang dihosting sendiri, atau default sistem, yang sering kali merupakan petunjuk pertama ketika Anda ingin mencocokkan atau mencari sumber jenis huruf. Alat warna melampaui pembacaan statis. Pemilih menawarkan kotak HSV dengan penggeser hue dan alfa, dan alat ini berbicara HEX, RGB, dan HSL sehingga Anda dapat bekerja dalam format apa pun yang sesuai untuk Anda. Pasangkan itu dengan penetes mata dan Anda dapat mengangkat warna tepat dari elemen apa pun dan memasukkannya ke pratinjau atau catatan Anda. 🚀 Mulai memeriksa Tambahkan FontLens, sorot beberapa kata, dan klik kanan untuk mengungkapkan tipografi, gaya, dan warna di balik halaman apa pun. Ini adalah pendamping yang cepat, pribadi, dan benar-benar berguna bagi siapa pun yang peduli tentang bagaimana web dibaca. Instal, simpanlah, dan jangan pernah bertanya-tanya tentang font misterius lagi.