Cara Mengetahui Font yang Digunakan Situs Web

Jika Anda pernah melihat situs web yang sangat menarik dan bertanya-tanya bagaimana cara melihat font apa yang digunakan situs web, jawabannya sesederhana membuka inspektur browser Anda. Setiap bit situs web ditafsirkan di browser Anda. Jadi, jika Anda tahu cara menggunakan pemeriksa browser dengan benar, Anda tidak hanya dapat mengetahui sumbernya tetapi juga gambar yang dimilikinya, properti CSS dari elemen lain yang ditemukan di halaman.

Dalam posting ini, kita akan melihat cara menggunakan pemeriksa browser Chrome untuk menemukan font apa yang digunakan situs web, dan bahkan cara mulai memainkannya. Tapi pertama-tama, saya akan menjelaskan cara mengaksesnya dan fitur apa yang Anda miliki di inspektur.

Akses Inspektur Chrome

Jika Anda menggunakan browser Chrome dan ingin memeriksa situs web, hal pertama yang harus Anda lakukan adalah mengakses jendela inspektur. Ada beberapa cara untuk melakukannya:

• Dengan menekan tombol F12, atau
• Dengan mengklik kanan pada item tertentu dan di menu yang terbuka, akses opsi Inspect . Keuntungan dari metode ini adalah secara langsung menyoroti elemen yang dimaksud, atau
• Dengan menekan kombinasi tombol Control + Shift + I (di Windows) atau Cmd + Alt + I (di Mac), atau
• Dengan mengakses menu Chrome (3 titik di bilah kanan atas) » Alat lainnya » Alat pengembang.

Jendela inspektur dapat ditampilkan terintegrasi ke dalam jendela browser itu sendiri atau ditampilkan di jendela terpisah. Untuk mengakses opsi ini, Anda dapat melakukannya dengan mengklik ikon konfigurasi (3 titik) di kanan atas inspektur dan mengubah nilai properti «Dock Side».

Anda juga memiliki opsi untuk melihat konten halaman dalam mode tampilan komputer atau seolah-olah Anda melihatnya di perangkat seluler. Klik tombol kedua di sisi kiri bilah atas inspektur dan Anda akan melihat bagaimana konten akan ditampilkan secara otomatis seolah-olah Anda mengaksesnya dari perangkat seluler.

Anda juga dapat menunjukkan jenis perangkat yang Anda inginkan untuk menampilkannya, ukurannya atau jika Anda ingin menampilkannya dalam mode potret atau lanskap.

Tab Utama Inspektur

Seperti yang mungkin telah Anda lihat, inspektur terdiri dari tab yang berbeda.

Dari masing-masingnya, Anda akan memiliki akses ke berbagai fungsi dan fitur:

• Elemen : menunjukkan kode HTML halaman, serta gaya yang diterapkan. Anda juga dapat memodifikasinya dan menambahkan aturan baru dengan cepat.
• Console : menampilkan berbagai pesan kesalahan dan peringatan yang terjadi pada halaman (gambar yang tidak dimuat, kesalahan javascript,…)
• Sumber : menampilkan pohon sumber daya untuk halaman tersebut. Anda dapat melihat dari mana sumber daya yang berbeda diperoleh dan memodifikasinya.
• Jaringan : menunjukkan berbagai permintaan yang dibuat dari situs web, mengakses konten permintaan, tanggapan yang diperoleh, waktu…
• Performance : menunjukkan proses yang sedang berjalan dan berfungsi untuk mengukur kinerja halaman.
• Memory : menunjukkan memori yang digunakan selama loading dan eksekusi halaman web.
• Aplikasi : menampilkan informasi yang berguna tentang sumber daya yang digunakan oleh aplikasi web.
• Keamanan : menampilkan informasi tentang berbagai situs yang diakses dari halaman dan sertifikatnya masing-masing.
• Audit : memungkinkan Anda membuat laporan audit untuk memeriksa kesalahan.
• Ada plugin yang menambahkan tab dan fungsionalitas ke inspektur, jadi mungkin ada lebih banyak tab. Pada gambar sebelumnya, terlihat bahwa kita telah menginstal plugin Redux DevTools .

Tab Elemen

Sekarang mari kita kembali ke masalah yang dihadapi: kita ingin mengetahui font konten apa pun di halaman web.

Seperti yang saya sebutkan sebelumnya, dari tab Elemen Anda dapat mengakses kode HTML dan gaya berbagai elemen di halaman tempat Anda berada.

Seperti yang Anda lihat pada gambar di atas, di sebelah kiri Anda memiliki jendela utama yang menunjukkan kode sumber. Dan di sebelah kanan, Anda memiliki panel aturan gaya CSS yang diterapkan ke berbagai elemen halaman.

Sebenarnya, di panel gaya Anda memiliki tiga tab:

• Styles : menunjukkan aturan CSS yang diterapkan dan Anda dapat memodifikasi dan menambahkan yang baru.
• Computed : menunjukkan semua aturan yang diterapkan pada elemen, dengan panel yang mewakili batas, margin, dan pengisian elemen.
• Pendengar Acara : menunjukkan pohon acara yang telah diluncurkan di halaman dan mengontrol yang terpengaruh olehnya.

Lihat detail item

Jadi, misalnya, jika Anda membuka halaman utama Perangkat Lunak Nelio kami, pilih kata Perangkat Lunak Nelio dari judulnya dan klik kanan untuk memeriksa itemnya, inspektur akan terbuka dan menunjukkan gambar di atas.

Pada gambar inspektur, Anda dapat melihat bahwa jendela utama memberi tahu saya bahwa gaya judul "Perangkat Lunak Nelio" adalah h1 .

Di jendela yang sama ini, Anda memiliki opsi untuk mengklik kanan pada atribut atau teks apa pun dan memodifikasi atau menghapusnya. Jelas, perubahan apa pun yang Anda buat di sini tidak akan mengubah konten asli, tetapi ini adalah alat yang sangat berguna saat Anda mendesain halaman dan Anda ingin mendapatkan gambaran tentang tampilan perubahan yang Anda buat.

Lihat Fontnya

Sekarang Anda tahu bahwa itu adalah judul, tetapi bagaimana dengan fontnya?

Nah, sangat sederhana, di tab Computed inspektur Anda akan menemukan semua properti dari item yang dipilih. Gulir ke bawah ke atribut font-family dan di sana Anda akan menemukan font yang persis seperti judul situs web kami.

Dan jika Anda ingin tahu tentang bagaimana elemen itu akan terlihat jika Anda ingin mengubah font, Anda pergi ke tab Styles , turun ke atribut font-family dan Anda dapat memodifikasinya langsung dengan nilai yang Anda inginkan.

Anda akan secara otomatis melihat situs web Anda dengan jenis font yang diubah

Seperti yang Anda lihat, inspektur Google Chrome adalah alat yang sangat nyaman dan mudah digunakan untuk bermain-main dan mencoba desain yang akan Anda tinggalkan setelah menerapkan modifikasi apa pun pada suatu elemen.

Bagaimana Dengan Font Gambar?

Inspektur Google Chrome, seperti yang Anda lihat, memungkinkan Anda melihat properti elemen apa pun di halaman Anda. Tetapi jika Anda ingin melihat font gambar di situs web, Anda tidak akan dapat melihatnya dengan inspektur. Inspektur akan menunjukkan properti gambar yang disisipkan di halaman Anda, tetapi tidak akan menunjukkan detail konten gambar itu.

Untuk melakukan ini, ada beberapa alat, seperti Font Squirrel Matcherator atau Whatfontis.com, yang dapat membantu Anda mengidentifikasi font yang digunakan dalam sebuah gambar. Untuk melakukan ini, di kedua alat Anda harus mengunduh gambar (di whatfontis.com Anda juga dapat menunjukkan URL gambar) dan kemudian pilih bagian gambar yang berisi huruf yang ingin Anda identifikasi.

Kedua alat akan menunjukkan kepada Anda seluruh rangkaian font yang kira-kira cocok dengan teks yang dipilih. Tetapi jika Anda menduga bahwa ini bukan kecocokan yang sama persis, Anda dapat mencari di google font yang mirip dengan yang ditunjukkan oleh alat dan Anda akan melihat apa yang Anda dapatkan.

Gambar unggulan Gemma Evans di Unsplash.