Bagaimana saya bisa tahu font apa yang digunakan situs web?

36

Bagaimana saya bisa mengetahui font apa atau font yang digunakan situs web? Apakah ada alat atau ekstensi browser yang dapat membuat pekerjaan lebih mudah?

font-identification web-fonts canonical Yisela
sumber
1
Lihat jawaban saya di Stack Overflow untuk alat bawaan di Chrome dan Firefox, dan opsi salin-tempel untuk Safari: stackoverflow.com/questions/884177/…
Arjan
Tanpa 10 rep untuk menjawab, jadi saya melakukannya di sini: pada saat ini (2018.3), Fount tidak tersedia, dan WhatFont tidak dapat diakses di add-on store Firefox; akhirnya saya harus memasukkan DevTool Chrome / IE / FF / Opera, "Style" tab, mengedit properti untuk menghapus setiap font dan melihat apa font yang diterapkan. Sangat disayangkan bahwa semua DevTools hanya menampilkan setumpuk font dan bukan yang benar - benar diterapkan . Bahkan dalam FF, "yang paling cocok" bukan yang paling cocok; acara pop-up "paling cocok" di setiap font di tumpukan ........ konyol kan?
WesternGun
@WesternGun, apa yang Anda maksud dengan "all DevTools" ? Firefox dan Chrome menunjukkan font yang sebenarnya; lihat tangkapan layar di jawaban yang saya tautkan di komentar saya sebelumnya.
Arjan
OK saya mengabaikan screenshot @Arjan. Sekarang sudah jelas.
WesternGun

Jawaban:

44

Opsi 1: Gunakan ekstensi browser (Mudah)

Ekstensi seperti WhatFont (tersedia untuk Chrome, Firefox dan Safari) membuatnya cukup mudah untuk mendeteksi keluarga font dari teks apa pun di halaman web. Anda hanya perlu menginstal ekstensi, mengaktifkannya di situs dan klik pada elemen yang ingin Anda periksa. Hasilnya ditampilkan dalam kotak mengambang, selalu dalam konteks pilihan Anda.

masukkan deskripsi gambar di sini

Opsi 2: Periksa secara manual CSS dengan inspektur peramban (Lanjutan)

Sebagian besar browser web memungkinkan Anda menemukan font dengan mudah menggunakan right-click→ 'Inspect' atau 'Inspect Element'. Itu juga bisa dilakukan dengan menekan F12. Ini akan menampilkan daftar gaya yang dilampirkan ke situs web, yang dapat Anda jelajahi untuk menemukan font yang digunakan dalam elemen HTML apa pun.

masukkan deskripsi gambar di sini

Menggunakan inspektur tidak semudah menggunakan ekstensi, tetapi memiliki beberapa keunggulan. Diperlukan pemahaman CSS, karena Anda biasanya harus melewati beberapa gaya untuk menemukan yang diterapkan. Sebagai aturan umum, gaya yang dicoret sedang ditimpa, jadi selalu cari yang terakhir diterapkan.

Semua gaya dari halaman tercantum dalam tab Style , tetapi jika Anda menggunakan tab Computed sebagai gantinya, Anda dapat menemukan properti yang secara aktif diterapkan pada elemen yang Anda pilih, termasuk tentu saja keluarga font.

Akhirnya, cara lain untuk dengan cepat memeriksa font apa yang sedang digunakan secara global (tetapi BUKAN bagaimana atau ke mana) adalah pergi ke 'Aplikasi → Bingkai → Font' . Di sana, Anda akan menemukan daftar semua font yang direferensikan (non-sistem).

Metode kedua ini lebih lambat, tetapi menggunakan inspektur dapat memberi Anda wawasan besar tentang cara seluruh halaman dibangun. Juga, banyak desainer dan pengembang menggunakannya sebagai alat untuk menguji perubahan sebelum benar-benar menulisnya di stylesheet (karena mengubah garis CSS di inspektur memicu pratinjau waktu-nyata di browser).

Yisela
sumber
1
Langkah yang bagus :-) satu pemikiran - bagaimana cara mengetahui font mana di tumpukan font family yang benar-benar Anda lihat di layar? Saya biasanya melakukannya dengan coba-coba, menghapus dari font pertama hingga menyebabkan tampilan berubah, tapi saya yakin ada cara yang lebih baik. Dalam WhatFont, apakah itu yang tercetak miring? (ps selamat datang kembali!)
user56reinstatemonica8
@ user568458 Terima kasih :) Saya pasti ingin menambahkan tangkapan layar dari proses menemukan font dengan inspektur. Saya sendiri mengalami kesulitan bahkan setelah bertahun-tahun menggunakannya! Tapi jujur ​​saja, saya tidak benar-benar memiliki teknik yang tepat, saya melakukan trial and error juga. Dalam WhatFont, saya percaya itu dicetak miring artinya bukan font sistem.
Yisela
@Yisela karena penasaran mengapa screenshot WhatFont menunjukkan ambil warna merah (# ea4858) dari font biru? Apakah hanya warna yang Anda ambil sebelumnya atau kesalahan? EDIT: Oh saya melihat itu mungkin warna hover ketika Anda memilih elemen itu, yang tampaknya tidak ideal tetapi masih keren.
DasBeasto
@DasBeasto Yap, ini adalah warna hover! i.imgur.com/5NLjaEV.png Poin bagusnya , kemenangan lain untuk inspeksi manual, karena memungkinkan Anda memilih status interaksi yang berbeda.
Yisela
3
Juga hanya ingin menambahkan, Firefox (v35.0) memiliki inspektur elemen yang baik untuk font. Anda dapat memilih tab font yang akan memberi tahu Anda semua detail tentang elemen yang Anda pilih (font family, style, filetype), atau dapat menekan "tampilkan semua font yang digunakan di halaman" yang akan menampilkan semua yang diunduh dari server. Kemudian Anda dapat mengunjungi tab yang dihitung yang juga akan memberi tahu Anda hal-hal seperti ukuran warna dll. Tanpa kekacauan tambahan dan warisan seperti Chrome.
DasBeasto
11

'Elemen pemeriksa' browser tidak sempurna

Menggunakan alat pengembang browser Anda adalah cara yang baik untuk melihat font mana yang dideklarasikan dalam CSS situs web. Ini tidak menunjukkan font mana yang benar-benar dirender — itu hanya menunjukkan tumpukan font yang diterapkan — font aktual yang diberikan dapat bervariasi tergantung pada font yang dipasang, dll.

Alat lain yang bermanfaat adalah Fount .

Fount akan memberi tahu Anda font web mana di tumpukan font yang benar-benar Anda lihat - bukan hanya apa yang seharusnya dilihat. Ini juga akan memberi tahu Anda ukuran font, berat, dan gaya.

Menggunakan Fount semudah menambahkan bookmark. Tidak perlu memasang aplikasi atau ekstensi apa pun.

Setelah menambahkan bookmark:

  1. Pergi ke situs mana saja dan klik bookmark Fount.
  2. Klik pada jenis apa pun yang ingin Anda identifikasi. Ulangi.
  3. Untuk mematikan Fount, cukup klik bookmarklet lagi.

Fount berfungsi di Safari, Chrome, Firefox, dan IE8 +.

Cai
sumber
Fount bagus karena berfungsi untuk IE juga, tetapi harga WhatFont lebih baik karena menunjukkan Anda font yang terlihat nyata serta font yang ditentukan dalam markup HTML. Jadi perbandingannya cepat.
Moiz Tankiwala
1
Situs turun ... tidak tersedia pada 2018
WesternGun
@FaithReaper situs (dan skrip) masih berfungsi dengan baik bagi saya
Cai
1
Saya memasuki situs dan hanya melihat blok abu-abu di sebelah kiri, tanpa instruksi atau tidak sama sekali? Saya tidak dapat mengunggah gambar tetapi terlihat aneh. fount.artequalswork.com/
WesternGun
@FaithReaper situs akan terlihat seperti ini: i.stack.imgur.com/goShP.png (Anda tidak mengunggah gambar, itu hanya bookmark yang Anda gunakan untuk memeriksa font yang digunakan di situs langsung)
Cai
1

Saya suka ekstensi browser Chrome CSSViewer . Anda cukup klik dan arahkan kursor ke font yang ingin Anda identifikasi dan itu menunjukkan Anda keluarga font.

ekstensi chrome penampil css

pengguna86140
sumber
-2

FontFinder dibuat untuk desainer, pengembang, dan juru ketik. Ini memungkinkan pengguna untuk menganalisis informasi font elemen apa pun pada halaman, menyalin setiap bagian dari informasi itu ke clipboard, dan melakukan penggantian inline untuk menguji tata letak baru.

Pengaya ini adalah yang terbaik untuk menemukan font dan css lainnya seperti berat font, ukuran, dan banyak lagi bentuk halaman web.

Khushbu Solanki
sumber
3
Hai Khushbu, selamat datang di GDSE. Bisakah Anda memberi tahu kami apa dan di mana kami dapat "FontFinder"? Juga, jika Anda berafiliasi dengan produk, Anda harus mengungkapkan afiliasi Anda dalam jawaban Anda. Lihat Bagaimana tidak menjadi spammer .
Cai
2
Teks dalam jawaban di atas adalah copy-dan-paste dari chrome.google.com/webstore/detail/font-finder/... dan / atau add0n.com/font-finder.html
ChrisW