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

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.

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.

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 :

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:

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:

Firefox 22+ akan menunjukkan kepada Anda font mana yang sedang digunakan , tanpa ekstensi apa pun.

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

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.

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

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

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!