Utilitas untuk menentukan font yang digunakan di situs? [Tutup]

9

Sebagai contoh: Saya suka font yang digunakan di situs web: NYTimes , jadi sesuatu yang bisa daftar semua font yang digunakan oleh situs web akan lebih bagus!

Saya lakukan TIDAK ingin sebuah utilitas pemrosesan gambar yang dapat menganalisis tangkapan layar atau situs yang akan ajukan pertanyaan tentang font dan mempersempit dari daftar.

Sesuatu yang bisa merayapi situs web dan mencantumkan font-nya ... Akan lebih bagus jika bisa overlay font pada wilayah, tapi itu akan terlalu jauh, kurasa.

software-rec website fonts Lazer
sumber
@Arjan mengapa :-(? Saya secara eksplisit menyebutkan apa yang tidak saya cari, yang merupakan subjek dari sebagian besar jawaban di sana.
Lazer
Firefox telah menjadikan ini sangat mudah saat ini, untuk satu halaman; lihat jawaban saya yang diperbarui .
Arjan

Jawaban:

20

Ada banyak cara untuk mencapai ini. Saya sebenarnya melakukan ini cukup banyak, karena saya sangat tertarik dengan cara kerja CSS, dan juga saya hanya cinta tipografi. Dua cara yang saya suka lakukan ini adalah:

  • Menggunakan "inspektur" dengan peramban Anda (inilah yang Anda cari!) - Saya menggunakan Google Chrome (karena saya menyukainya), yang memiliki a alat Inspektur bawaan . Anda benar-benar harus mencobanya. Anda hanya pergi ke situs, klik kanan pada elemen apa pun yang ingin Anda analisis, dan klik "Periksa Elemen" dari menu konteks. Inspektur menampilkan properti dinamis dari HTML dan CSS , jadi jika Anda memeriksa elemen teks, Anda akan melihat font-family properti css di inspektur (di bilah sisi kanan), yang akan memberi tahu Anda apa fontnya (lihat di bawah untuk informasi tentang bagaimana menafsirkan CSS ini). Anda dapat menggunakan Firebug untuk Firefox untuk mencapai sesuatu yang serupa, tetapi saya percaya bahwa alat Google Chrome Inspector jauh lebih unggul (saya seorang pengembang web - saya menggunakannya untuk semuanya!).

  • Atau, Anda dapat secara manual melihat sumber halaman dan menganalisis CSS. Berikut cara melakukannya:

    1. Saat Anda berada di halaman, lihat sumbernya. Jika Anda menggunakan Internet Explorer, buka Halaman - & gt; Lihat Sumber atau Lihat - & gt; Sumber. Jika Anda menggunakan Firefox, Chrome, atau browser modern lainnya, tekan Ctrl + U (atau Apple + U, tergantung pada sistem operasi Anda).

    2. Dalam kode HTML, cari konten teks yang ingin Anda analisis. Anda harus menemukan beberapa tag yang mengandung teks, dan mereka mungkin memiliki font yang dikodekan ke dalam HTML (menggunakan a <font> tag atau di style atribut a <p> atau a <div> enklosur), atau dapat merujuk beberapa CSS (lihat a class atau id atribut, dan tuliskan ini).

    3. Jika yang terakhir (merujuk pada beberapa CSS), buka bagian atas HTML dan temukan <link> tag di <head> halaman. Jika tautan mereferensikan stylesheet, Anda akan melihatnya - yang harus Anda lakukan sekarang adalah pergi ke lembar gaya CSS dan cari pengidentifikasi kelas atau id yang Anda tulis. Di suatu tempat, Anda akan menemukan yang sesuai font-family properti (jangan lupa, Anda juga dapat mengatur font secara global di seluruh situs, dan ini akan berada di bawah <body> tag atau yang lainnya. Inilah sebabnya mengapa Anda harus menggunakan alat inspektur, karena kesulitan ini diatasi).

Bagaimana menafsirkan font-family css:

Itu font-family properti akan menentukan font apa. Di properti ini, font akan dipisahkan dengan koma . Saat merender halaman, browser akan l ook daftar ini dan gunakan font pertama di dalamnya yang ada di komputer . Dalam banyak kasus, ada juga kategori font di akhir properti ini, yang hanya merupakan "just-in-case" sehingga font default untuk kategori tersebut digunakan jika tidak ada yang lain tersedia.

Contoh: Katakanlah ini css untuk a <p> lampiran. 

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

Di sini, browser akan terlebih dahulu mencoba menggunakan Calibri, jika font tersedia. Jika tidak, ini menggunakan Comic Sans MS, atau Georgia, atau hanya font sans-serif default jika yang lain tidak tersedia.

Ini adalah bagaimana Anda bisa mengetahui font apa yang sedang digunakan. Saya belum menemukan alat yang dibangun dan membantu yang memvisualisasikan CSS dengan cara yang sangat bagus, tapi saya pikir opsi Inspektur akan bekerja untuk Anda (bukan terlalu membingungkan!). Saya pikir inilah caranya.

Contoh cara menemukan font NYTimes dengan alat Inspektur:

Saya akan memandu Anda melalui cara menemukan font untuk badan teks utama artikel NYTimes dengan Google Chrome.

  1. Buka artikel di NYTimes.com, klik kanan pada elemen teks yang ingin Anda cari fontnya, dan tekan Memeriksa elemen .

    Opening the Inspector

  2. Lihatlah bilah samping di sebelah kanan. Dalam Dropdown Gaya Komputasi , Anda akan melihat properti CSS untuk elemen ini. Namun, seperti yang Anda lihat, tidak ada properti font-family di sini saat ini, yang berarti font didefinisikan secara global, tidak hanya untuk elemen spesifik ini. Namun, ada cara untuk menyiasatinya!

    Viewing the element properties

  3. Inilah yang Anda lakukan: Pilih tombol radio di sebelah "Tampilkan yang diwarisi".

    Select show inherited

  4. Banyak properti global lainnya akan muncul di bawah "Gaya Komputasi".

    Many global properties appear

  5. Gulir ke bawah dalam daftar untuk "font-family". Seharusnya berwarna abu-abu, artinya properti global yang diwarisi. Di sini, Anda dapat melihat font yang digunakan! Ta-da!

    Here are the fonts!

Maxim Zaslavsky
sumber
Saya akan menambahkan contoh penjelasan untuk NYTimes sekarang.
Maxim Zaslavsky
terima kasih ppl, aku suka tempat ini - www.superuser.com, bahkan lebih sekarang :)
Lazer
@ Maximz2005, untuk beberapa pilihan saya tidak mendapatkan "dropdown Style Komputasi". Saya baru saja mendapatkan dropdown Style kosong. Mengapa demikian?
Lazer
1
Karena inspektur tersebut benar-benar inspektur WebKit, saya berasumsi beta yang lebih baru akan menyertakan versi WebKit yang lebih baru juga? Versi yang lebih baru dapat menunjukkan bug baru, tentu saja, tetapi saya bertanya-tanya apakah itu kemungkinan besar Anda baru saja menemukannya. Apakah ada cara untuk menunjukkan versi WebKit yang digunakan di Chrome?
Arjan
1
saya adalah WebKit 532.0 @ Maxim Z. Saya mencoba di chrome teman saya (versi 3.something). Ini berfungsi dengan baik di sana. Saya akhirnya dapat mendeteksi font seperti yang saya inginkan. Sekarang saya mengerti betapa kerennya fitur "inspect element".
Lazer
7

Ada dua hal berbeda:

  1. Font mana yang sebenarnya digunakan (oleh browser / sistem operasi).
  2. Font mana yang diminta (oleh pembuat situs web).

1. Font (fallback) mana yang sebenarnya digunakan

Untuk mengetahui dengan pasti font yang mana bekas di browser khusus di komputer / sistem operasi Anda, saat ini Firefox dan Chrome memiliki alat bawaan untuk itu. Seperti yang dimiliki Inspektur Halaman Firefox Tampilan Font :

Firefox Fonts View

Untuk lebih jelasnya, lihat Bagaimana cara menentukan font apa yang sebenarnya digunakan browser untuk membuat teks? pada Stack Overflow. Itu termasuk:

  • Teks mungkin menyertakan karakter Unicode yang tidak ada dalam font yang didefinisikan dalam CSS, jadi berganda font dapat digunakan dalam satu elemen.
  • Tidak setiap browser di mesin yang sama mungkin menggunakan font yang sama mengetik (seperti TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) dan karenanya mungkin menggunakan font yang berbeda. Jadi, Anda mungkin perlu menentukan font mana yang digunakan di browser lain.

2. Font mana yang diminta

Untuk mengetahui font mana yang diminta (oleh pembuat situs web), alat-alat seperti Firefox Page Inspector atau bawaannya Ekstensi Firebug membantu memeriksa aturan CSS. Alat seperti itu tidak memberi tahu Anda font mana yang sebenarnya bekas , tetapi tidak menunjukkan font yang mana diminta untuk wilayah tertentu, atau bahkan untuk kata tertentu, diberikan stylesheet CSS:

CSS in Firebug

Di atas menunjukkan Firebug. Pertama pilih "Show computed style" di menu Style di sebelah kanan. Selanjutnya, klik tombol panah di sebelah kiri. Dan kemudian klik pada teks yang Anda minati. Ini akan memperbarui informasi style sheet CSS di sebelah kanan. Lihat fitur-fitur untuk mempelajari tentang fungsi-fungsi CSS.

Beberapa Firebug Lite juga tersedia untuk browser lain, tetapi saya tidak pernah menggunakannya.

Inspektur Web di Safari dan Alat pengembang di Chrome memiliki opsi serupa. (Di Safari, aktifkan Inspektur Web melalui preferensi: Tampilkan menu Kembangkan di bilah menu .) Internet Explorer memiliki Alat F12 .

Seperti e-t172 dicatat : itu Bilah Alat Pengembang Web untuk Firefox juga dapat menampilkan info ini. Namun, CSS »Lihat Informasi Gaya tidak menunjukkan kepada Anda gaya" warisan "(" berjuntai "), tetapi hanya informasi yang spesifik untuk wilayah yang Anda klik. Sebagai gantinya, untuk mendapatkan semacam overlay dan untuk benar-benar melihat informasi font, Anda dapat menggunakan Informasi »Informasi Elemen Display. Itu akan menampilkan detail setiap kali Anda mengklik halaman di suatu tempat.

Arjan
sumber
+1 Untuk jawaban yang jauh lebih detail dari saya.
BinaryMisfit
Bagaimana Anda mendapatkan tangkapan layar fade ini? Sepertinya Mac, ada kemungkinan mendapatkan efek serupa di Vista atau XP?
Lazer
@ Lazer, Skitch pada Mac (tetapi bayangan agak standar dan jenis yang diperlukan, karena OS X memiliki batas jendela yang sangat tipis, jika ada). Tidak tahu cara menyelesaikannya di Windows.
Arjan
4

Jika Anda menggunakan Firefox ada Add-on Pencari Font . Itu pada dasarnya apa Maxim Z. dijelaskan dalam jawabannya , tetapi secara otomatis, jadi sangat mudah digunakan ..

Ludwig Weinzierl
sumber
Finder Font adalah persis apa yang saya cari. Andai saja ada ekstensi serupa untuk Chrome.
kangax
@ Kangax, ada saat ini; Lihat Jawaban Alec
Arjan
Dan @kangax, saat ini Firefox dan Chrome memiliki alat bawaan untuk menentukan font yang sebenarnya. Tidak perlu lagi menebak.
Arjan
4

Sejauh ini, ini adalah solusi terbaik yang pernah saya temui. Ini bookmarklet / ekstensi yang akan memberitahu Anda 99% dari waktu tentunya font apa yang digunakan, dengan membandingkan piksel teks yang ditampilkan dengan yang ada pada setiap font yang tersedia, termasuk font TypeKit dan Google Font API.

Alat WhatFont

enter image description here

Coba lihat.

Max
sumber
Bagus, sangat bagus, tetapi saya tidak berpikir itu sebenarnya membandingkan piksel (saat ini)? Ketika CSS hanya mengatakan font-family: sans-serif maka itu juga yang dilaporkan — tetapi itu sendiri bukan font. Ketika menggunakan font-family: someUnknownFont saya mendapat (default font) sebagai hasilnya, yang kemudian sebenarnya adalah Times di Mac saya. (Diuji dengan bookmarklet, menggunakan Bin JS ini ; tangkapan layar .) Namun, sekali lagi: bagus!
Arjan
@ Arjun saya memeriksanya secara rinci beberapa bulan yang lalu, jadi saya akan menjelaskan sebaik yang saya ingat. Di bawah tenda, ia melakukan dua hal. Itu menggunakan window.getComputedStyle untuk mendapatkan font-family yang dihitung. Ini kemudian mengulangi tumpukan ini, membandingkan piksel setiap font dengan piksel yang ditampilkan. Pertandingan pertama adalah yang ditampilkan miring dalam pop-up, sisanya ditampilkan secara normal. Jika tidak ada kecocokan, itu akan ditampilkan (default font). Alasan kamu melihat sans-serif karena cocok dengan benar ke sans-serif font, namun saat ini tidak membedakan lebih jauh.
Max
Firefox adalah teman baru saya untuk ini; lihat jawaban saya yang diperbarui :-)
Arjan
3

Saya tidak tahu perangkat lunak apa pun. Saya baru saja menggunakan Internet Explorer dan menemukan bahwa font yang digunakan adalah:

font-family: georgia, "times roman baru", times, serif

Ini adalah font utama. Mencari stylesheet apa pun dengan font-family akan memberikan sisanya.

Proses:

  • Klik kanan pada Halaman Utama
  • Mencari baris rel = stylesheet dan URL stylesheet yang terlampir
  • Salin dan tempel ke browser dan unduh file css.
  • Buka di editor teks.

Jika Anda mencari font pada gambar yang tidak akan ditentukan di luar gambar.

Ya saya sangat bosan. Lagipula itu hari Jumat sore. Saya tidak memposting tautan karena mereka memperbarui stylesheet secara teratur.

BinaryMisfit
sumber
Uhuh, Firebug di Firefox, atau Web Inspector di Safari ...?
Arjan
1
Seperti yang saya katakan. Saya bosan. Ubah rasa Browser Anda dan lihat sumbernya. Ada alat lain, tetapi menjaganya agar tetap sederhana bukanlah pendekatan yang salah.
BinaryMisfit
Baik untuk fakta sendiri bahwa itu mengajarkan pengguna sesuatu selain selalu mengandalkan Firefox.
random
Menurut Wikipedia, keduanya georgia dan times new roman adalah tipografi. Jadi, apa artinya hasilnya? Kombinasi kedua tipografi itu?
Lazer
1

Anda dapat menggunakan ekstensi Firefox Pengembang Web untuk melihat semua gaya yang digunakan oleh bagian tertentu dari halaman web. Gunakan menu CSS, Lihat informasi gaya. Kemudian klik pada teks yang ingin Anda analisis, dan cari properti "font-family" di hasil.

Etienne Dechamps
sumber
Informasi »Informasi Elemen Display berfungsi lebih baik (itu akan menampilkan gaya yang diwarisi juga, dan Anda tidak perlu mencari sendiri).
Arjan
1

Berlawanan dengan apa yang dikatakan banyak orang, BUKAN selalu hanya masalah melihat sumber dll - tergantung apakah CSS ada di dokumen atau dalam file css eksternal. Jika ini eksternal, Anda tidak bisa hanya melihat sumber dan menemukan tag font-family karena sebenarnya tidak ada di file.

Poster yang menyarankan untuk menggunakan Google Chrome sebenarnya telah memberikan tip yang sangat bagus - Saya belajar sesuatu di sini dan ingin menambahkan tip tambahan. Di alat pengembang yang muncul di Chrome, Anda MUNGKIN harus mengklik "Computed Style" lalu klik kotak centang "Show Inherited" lalu gulir ke bawah sebelum Anda menemukannya - ini adalah contoh ekstrem, tetapi di mana ia menunjukkan akan bergantung pada bagaimana halaman telah disusun.


sumber
0

Berikut ini adalah solusi sederhana, tetapi efisien,: bookmarklet yang memperlihatkan kepada Anda konfigurasi yang diterapkan pada elemen (termasuk keluarga font).

Situs Bookmarklets Jesse memiliki situs yang bagus untuk pekerjaan ini: computed styles.

Ini dia: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

Adriano P
sumber
-1

jika itu bukan inline css buka saja halaman pada tampilan sumber. Salin alamat css seperti "/themes/01.css" tempel pada url browser. Salin kembali paste di editor teks atau editor css. Gunakan find untuk fine font atau font-family done. Keluarga font yang terdaftar gunakan untuk menampilkan font halaman untuk ukuran dan atribut lainnya seperti huruf tebal, miring dll.

Terima kasih duronto

Get a free back link
sumber