Bagaimana saya bisa menentukan font apa yang sebenarnya digunakan browser untuk membuat teks?

175

CSS saya menentukan " font-family: Helvetica, Arial, sans-serif;" untuk seluruh halaman. Sepertinya Verdana digunakan sebagai gantinya pada beberapa bagian. Saya ingin dapat memverifikasi ini.

Saya sudah mencoba menyalin dan menempel dari browser saya ke Word, tetapi tidak mempertahankan font.

Apakah ada cara untuk menentukan font mana yang sebenarnya digunakan untuk bagian teks?

Firebug akan memberi saya daftar font seperti di atas [1], tetapi saya tidak melihat cara untuk menentukan font mana yang sedang digunakan.

  1. Ternyata daftar yang salah digunakan, yang memecahkan masalah Verdana asli saya. Tapi saya masih penasaran apakah ada cara untuk mengidentifikasi font rendering yang sebenarnya.
css browser fonts lavaturtle
sumber
stackoverflow.com/questions/845/detecting-font-in-javascript
ajm
FontFinder dan WhatFont yang dijelaskan dalam jawaban di bawah ini masih merupakan cara yang sangat kasar untuk mendeteksi font yang digunakan. Keduanya secara keliru mengindikasikan "Quanttrocentro Sans" (font utama) ketika saya memilih ؋simbol Aghani yang tidak tersedia dalam font ini.
Pertanyaan Overflow
@QuestionOverflow, Firefox dan Chrome saat ini memiliki alat bawaan untuk menentukan font. Mereka akan menunjukkan font untuk setiap mesin terbang, maka akan menunjukkan kepada Anda font apa yang digunakan untuk itu juga.
Arjan
@ Arjan: apakah ini masih terjadi pada tahun 2020?
melahap elysium
@devouredelysium, apakah Anda melihat jawaban saya ? Cukup pilih satu mesin terbang tunggal untuk melihat font apa yang digunakan.
Arjan

Jawaban:

50

Per jawaban Wilfred Hughes , Firefox sekarang mendukung ini secara asli. Artikel ini memiliki lebih banyak detail .

Jawaban asli ini mereferensikan plugin "Font Finder", tetapi hanya karena berasal dari 4 tahun yang lalu. Fakta bahwa jawaban lama tetap seperti ini dan komunitas tidak dapat memperbaruinya adalah salah satu dari beberapa kegagalan Stack Overflow yang tersisa.

Jeremy Kauffman
sumber
7
Tidak ada alasan untuk menggunakan ini sekarang karena Alat Firefox> Pengembang Web> Inspektur> Font memberi tahu Anda (jawaban Wilfred Hughes)
skierpage
1
Sayangnya, Firefox 47 tidak lagi memiliki tab Font yang direferensikan di blog ini yang Anda
tautkan
3
"Mulai di Firefox 47, tampilan Font dinonaktifkan secara default. Kami sedang mengerjakan penggantian yang lebih berfitur lengkap. Untuk saat ini, jika Anda ingin melihat tampilan Font, kunjungi tentang: konfigurasi, temukan devtools preferensi. fontinspector.enabled, dan setel menjadi true. " Lihat developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .
Daniel Le
1
Rupanya, pengaturan devtools.fontinspector.enabledhanya diperlukan di Firefox 47: "Di Firefox 47 saja , tampilan Font dinonaktifkan secara default. Jika Anda ingin melihat tampilan Font di Firefox 47, kunjungi about:config, cari preferensi devtools.fontinspector.enabled, dan atur ke true. Sebelum dan sesudah Firefox 47, tampilan Font diaktifkan secara default. " , @DanielLe.
Arjan
1
@DanielLe, tentu saja saya mengerti itu benar pada saat Anda menyalin teks :-)
Arjan
151

Saat ini Chrome dan Firefox memiliki alat bawaan untuk itu, tetapi Safari meminta Anda menyalin beberapa teks dan menyelidikinya.

Pertama, pilih beberapa teks. Di Firefox, Inspektur Halaman memiliki tampilan Font :

Tampilan Font Firefox

Ini juga akan memberi tahu Anda jika font diunduh, dan gaya mana yang digunakan, seperti Regular, ExtraLight, Italic, BoldItalic, dan semuanya.

Untuk Chrome, masuk ke "Elemen" DevTools, buka tab "Dihitung", dan gulirkan sepenuhnya ke bagian yang disebut "Font yang Diubah". Berbeda dengan Firefox, ini hanya menampilkan nama font dasar, bukan gaya spesifik apa pun yang mungkin digunakan:

Inspektur web Chrome

Tangkapan layar di atas menunjukkan bahwa beberapa font mungkin ditampilkan untuk teks Unicode. Chrome memberi tahu Anda 6 mesin terbang ("Pekka" dan spasi) menggunakan "Arial", dan satu ("웃") menggunakan "Apple SD Gothic Neo":

Arial - File lokal (6 mesin terbang)
Apple SD Gothic Neo - File lokal (1 mesin terbang)

CSS aktual mendefinisikan:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Tetapi font-font itu sering tidak menyertakan banyak karakter khusus. Karena informasi font berfungsi per elemen HTML, di mana teks Unicode dalam suatu elemen sebenarnya bisa menggunakan banyak font, ini juga menunjukkan beberapa font. Jika ragu, cukup klik dua kali teks di panel HTML dan singkirkan teks yang tidak Anda sukai. Lalu, ketika memilih elemen sekitarnya lagi, Anda hanya akan melihat satu opsi. Dalam hal ini akan memberi tahu Anda bahwa kedua browser menggunakan "Apple SD Gothic Neo Regular" untuk karakter "웃".

Sayangnya, berbagai browser (dan bahkan versi berbeda dari satu browser) pada mesin yang sama mungkin menggunakan font yang berbeda, karena jenis font yang didukung / disukai oleh browser. Pada Mac, misalnya, Safari mungkin lebih suka Apple Advanced Technology sementara Firefox mendukung Microsoft OpenType (yang mungkin menghasilkan masalah untuk bahasa Arab setelah menginstal Microsoft Office pada Mac). Atau untuk karakter "웃" pada tangkapan layar di atas, Chrome dan Firefox di Mac saya saat ini lebih memilih "Apple SD Gothic Neo" (yang merupakan OpenType PostScript) tetapi versi Firefox yang lebih lama menggunakan "AppleGothic Regular" sebagai gantinya (yang merupakan font TrueType) .

Untuk browser yang tidak memiliki tampilan font yang sama, cukup salin & rekatkan sebagian teks ke beberapa pengolah kata atau editor Rich Text, pilih beberapa teks tertentu, dan lihat nama mana yang muncul di beberapa daftar dropdown font. Di Mac saya, ini tidak berfungsi ketika menempelkan dari Firefox (di mana untuk "웃" Firefox "Apple SD Gothic Neo" dikonversi menjadi "AppleMyungjo" pada menempelkan), tetapi berfungsi dengan baik untuk Safari dan Chrome:

Teks yang disisipkan dari browser ke editor teks kaya

Arjan
sumber
1
Apakah Anda tahu apakah Safari memiliki plugin atau sesuatu untuk ini?
Andry
4
Di Chrome 47, pastikan Anda menggulir ke bagian bawah bagian yang Dihitung. Memperluas font-familyatribut seperti yang terlihat (dalam urutan abjad) tidak akan menampilkan font mana yang sedang dimuat. Informasi ini muncul di bagian bawah.
Merchako
1
@Merchako, Apa yang terjadi ketika font yang Anda hitung adalah font generik seperti "serif" dan "sans-serif"? Lalu bagaimana Anda mendapatkan font yang sebenarnya ?
Pacerier
2
@Pacerier, di Chrome gulir ke bawah sepenuhnya di tab Computed; di Firefox lihat tab terpisah.
Arjan
1
@TMG, saya bisa membayangkan font web mungkin tidak perlu alias, tetapi dapat merujuk ke beberapa URL secara langsung. Apakah ini situs web publik yang dapat kita lihat? Jika tidak, apa yang ditampilkan oleh Firefox?
Arjan
30

WhatFont adalah ekstensi Chrome yang akan memberi tahu Anda secara spesifik font apa dalam tumpukan font yang sedang dimuat.

pengguna1100745
sumber
6
Bagi saya dikatakan font apa yang dideklarasikan, tetapi bukan font apa yang sebenarnya digunakan.
panzi
3
Menurut artikel ini ( pembaruan.html5rocks.com/2013/09/... ), Dev Tools sekarang dapat memberi tahu Anda apa yang sebenarnya dibuat font.
Yorch
WhatFont berupaya mendeteksi font yang diberikan tetapi tampaknya tidak melakukannya dengan sukses github.com/chengyin/WhatFont-Bookmarklet/issues/13
Chris Marisic
7

Untuk versi Firefox saat ini (sejak v7), ada add-on yang disebut "fontinfo" yang akan melaporkan font aktual yang digunakan (daripada apa yang dikatakan properti font-family CSS), dengan mempertimbangkan kasus-kasus di mana browser kembali ke font yang berbeda karena font-family yang diminta tidak tersedia atau tidak mendukung karakter yang digunakan dalam teks.

Jonathan
sumber
Sekarang, ini adalah jawaban terbaik
Ingo Kegel
1

Anda dapat mencoba memeriksa bagian tertentu itu dengan Firebug untuk Firefox. Seharusnya memberi Anda semua properti yang tepat.

jeroen
sumber
Itu masih memberi saya daftar, bukan yang spesifik yang digunakannya ... Tetapi pada pemeriksaan kedua, Verdana entah bagaimana masuk ke daftar font-family, yang akan menjadi penyebab masalah asli saya. Jadi terima kasih.
lavaturtle
1
Firebug juga akan memberi tahu Anda aturan mana yang diaktifkan untuk memberikan elemen font itu - sangat berguna untuk mengetahui letak kesalahan CSS Anda.
RichieHindle
Safari 4 Beta memiliki WebInspector juga (bisa menjadi pembakar berkulit)
vikingosegundo
1
Saya pikir Anda akan selalu mendapatkan daftar lengkap, alat apa pun yang Anda gunakan. Font yang digunakan adalah yang pertama dalam daftar yang diinstal pada komputer Anda.
Jeroen
2
Firebug saat ini (1.11.4, mungkin juga sebelumnya) menyoroti font saat ini berwarna biru.
Mark Vrabel
1

Plugin "FontFinder" yang disebutkan oleh jeremy tampaknya tidak berfungsi di sini, memberikan font pertama dari daftar CSS terlepas dari font yang sebenarnya dibuat (Firefox 4.0rc1 di Linux). Namun plugin berikut memberi Anda font yang "benar".

Font Konteks

Dave Vogt
sumber
Sayangnya, bahkan Context Font hanya memperlihatkan keluarga CSS yang dikomputasi, yang bisa berupa serif atau sans-serif, misalnya. Selain itu, jika beberapa karakter tidak ada dalam font yang dikomputasi dan browser mengambilnya dari font yang berbeda, Font Konteks masih menunjukkan keluarga font yang dikomputasi, bukan font yang sebenarnya.
Jukka K. Korpela
0

Berdasarkan pendekatan pengukuran teks dan skrip dari Lalit Patel, saya telah membuat bookmarklet yang dapat menebak font yang digunakan untuk teks yang saat ini dipilih (atau body, jika tidak ada yang dipilih). Tampaknya berfungsi dengan baik bagi saya untuk mencari tahu font mana dalam tumpukan yang digunakan! (Namun, tidak dapat memberi tahu Anda apa yang sans-serifsebenarnya dipetakan.)

Raih mereka di sini: https://alanhogan.com/bookmarklets#font-stack-full

Sumbernya ada di GitHub .

Lihat juga: CodePen ini , yang sebagian besar menggunakan kode yang sama. Cobalah dengan paragraf berbeda yang dipilih dan lihat tabel / tebak pembaruan!

Alan H.
sumber