Tôi làm cách nào để biết Chrome đang sử dụng phông chữ nào?

Question

Hãy tưởng tượng tôi có CSS ​​sau

font-family: 'Non-existant Sans', Arial, sans-serif; 

Giả sử 'không tồn tại Sans' không được cài đặt trên hệ thống, Arial sẽ được sử dụng bởi trình duyệt. Sử dụng Chrome, có cách nào để tìm ra phông chữ nào đang được hiển thị không?

Chỉnh sửa: Dave (trong nhận xét cho câu hỏi) đã chỉ ra một câu hỏi tương tự. Tôi đặc biệt hỏi về Chrome ở đây. Tuy nhiên, nhiều câu trả lời trong câu hỏi khác gợi ý rằng các tiện ích mở rộng không quan trọng; có cách nào để xác định thông tin này bằng cách sử dụng Công cụ dành riêng cho Dev không?

Chỉnh sửa tháng 9 năm 2013: Nhóm Chrome vừa thông báo rằng kiểm tra gia đình phông chữ hiện có sẵn trong latest builds of Chrome Canary (liên kết Twitter chứa hình ảnh có thêm thông tin). Điều này sẽ giảm xuống thông qua dev> beta> ổn định trong vài tuần tới - tin tuyệt vời!

Answer 1

'Sans không tồn tại' của bạn có thể được hiển thị với @ font-face trong css của bạn. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Tôi không biết cách nào để phát hiện hiển thị phông chữ, vì vậy, tôi không trả lời kỹ câu hỏi của bạn. Tôi đã tìm thấy điều này: http://webdesignerwall.com/tutorials/css3-font-face-design-guide đó là một javascript được gọi là Modernizr đảm bảo nếu một trình duyệt không hỗ trợ @ font-face thì nó sẽ tải các phông chữ dự phòng như Arial và Helvetica.

Answer 2

Nếu bạn không muốn sử dụng một plugin có một bookmarklet mà sẽ nói với bạn điều này (một lần kích hoạt và bạn di chuột qua cho biết văn bản):

http://chengyinliu.com/whatfont.html

Answer 3

tôi là một chút muộn để nhưng tôi vừa phát hiện ra một cách rất đơn giản để gỡ lỗi phông chữ mà trình duyệt của bạn đang sử dụng.

Trong Trình kiểm tra web Chrome, chuyển đến ngăn xếp phông chữ trong ngăn CSS của Bảng điều khiển phần tử. Sau đó, bắt đầu với phần trên cùng của chồng, thay đổi tên của phông chữ (tôi thêm các chữ cái ngẫu nhiên) trong khi vẫn để ý đến văn bản được đề cập. Khi bạn thay đổi một trong sử dụng, bạn sẽ thấy phông chữ thay đổi văn bản khi nó rơi trở lại một trong những tiếp theo trong ngăn xếp.

tôi giả sử một cái gì đó tương tự có thể trong hầu hết các công cụ dev

Voila

Answer 4

Trong DevTools Google Chrome trong tab 'yếu tố', dưới tựa đề 'Tính toán':