Làm cách nào tôi có thể xác định phông chữ nào trình duyệt đang thực sự sử dụng để hiển thị một số văn bản?

CSS của tôi chỉ định " font-family: Helvetica, Arial, sans-serif;" cho toàn bộ trang. Có vẻ như Verdana đang được sử dụng thay thế trên một số phần. Tôi muốn có thể xác minh điều này.

Tôi đã thử sao chép và dán từ trình duyệt của mình vào Word, nhưng nó không giữ được phông chữ.

Có cách nào để xác định phông chữ nào đang thực sự được sử dụng cho một phần của văn bản không?

Fireorms sẽ cung cấp cho tôi danh sách các phông chữ như trên [1], nhưng tôi không thấy cách nào để xác định một trong những phông chữ đang được sử dụng.

1. Hóa ra danh sách sai đã được sử dụng, điều này đã giải quyết vấn đề Verdana ban đầu của tôi. Nhưng tôi vẫn tò mò liệu có cách nào để xác định phông chữ hiển thị thực tế không.

Theo câu trả lời của Wilfred Hughes , Firefox hiện hỗ trợ điều này. Bài viết này có nhiều chi tiết hơn .

Câu trả lời ban đầu này đã tham chiếu plugin "Trình tìm phông chữ", nhưng chỉ vì nó có từ 4 năm trước. Việc các câu trả lời cũ tồn tại như thế này và cộng đồng không thể cập nhật chúng là một trong số ít những thất bại còn lại của Stack Overflow.

Ngày nay Chrome và Firefox có các công cụ tích hợp sẵn cho việc đó, nhưng Safari cần bạn sao chép một số văn bản và điều tra điều đó.

Đầu tiên, chọn một số văn bản. Trong Firefox, Trình kiểm tra trang có chế độ xem Phông chữ :

Điều này cũng sẽ cho bạn biết nếu các phông chữ được tải xuống và kiểu nào được sử dụng, chẳng hạn như Thông thường, ExtraLight, Italic, BoldItalic và tất cả.

Đối với Chrome, hãy truy cập "Các phần tử" của DevTools, chuyển đến tab "Đã tính" và cuộn xuống phần được gọi là "Phông chữ được kết xuất". Không giống như Firefox, điều này chỉ hiển thị tên phông chữ cơ sở, không phải bất kỳ kiểu cụ thể nào mà nó có thể đang sử dụng:

Các ảnh chụp màn hình ở trên cho thấy nhiều phông chữ có thể được hiển thị cho văn bản Unicode. Chrome cho bạn biết 6 glyphes ("Pekka" và không gian) đang sử dụng "Arial" và một ("") đang sử dụng "Apple SD Gothic Neo":

Arial - Tệp cục bộ (6 glyphs)
Apple SD Gothic Neo - Tệp cục bộ (1 glyph)

CSS thực tế xác định:

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

Nhưng những phông chữ đó thường không bao gồm nhiều ký tự đặc biệt. Vì thông tin phông chữ hoạt động trên mỗi phần tử HTML, trong đó văn bản Unicode trong một phần tử thực sự có thể sử dụng nhiều phông chữ, nó cũng hiển thị nhiều phông chữ. Khi nghi ngờ, chỉ cần nhấp đúp vào văn bản trong ngăn HTML và loại bỏ văn bản bạn không quan tâm. Sau đó, khi chọn lại thành phần xung quanh, bạn sẽ chỉ thấy một tùy chọn. Trong trường hợp này, nó sẽ cho bạn biết rằng cả hai trình duyệt đã sử dụng "Apple SD Gothic Neo chính quy" cho ký tự "".

Thật không may, các trình duyệt khác nhau (và thậm chí các phiên bản khác nhau của một trình duyệt) trên cùng một máy có thể sử dụng các phông chữ khác nhau, do các loại phông chữ được trình duyệt hỗ trợ / ưa thích. Ví dụ, trên máy Mac, Safari có thể thích Công nghệ nâng cao của Apple trong khi Firefox hỗ trợ Microsoft OpenType (có thể gây ra sự cố cho tiếng Ả Rập sau khi cài đặt Microsoft Office trên máy Mac). Hoặc đối với ký tự "" trong ảnh chụp màn hình ở trên, Chrome và Firefox trên máy Mac của tôi hiện nay thích "Apple SD Gothic Neo" (là OpenType PostScript) nhưng các phiên bản cũ hơn của Firefox đã sử dụng "AppleGothic chính quy" thay vào đó (là phông chữ TrueType) .

Đối với các trình duyệt không có chế độ xem phông chữ tương tự, chỉ cần sao chép và dán một đoạn văn bản vào trình xử lý văn bản hoặc trình soạn thảo Rich Text, chọn một số văn bản cụ thể và xem tên nào hiển thị trong danh sách thả xuống phông chữ. Trên máy Mac của tôi, tính năng này không hoạt động khi dán từ Firefox (trong đó "Apple SD Gothic Neo" của Firefox được chuyển đổi thành "AppleMyungjo" khi dán), nhưng hoạt động tốt cho Safari và Chrome:

Firefox 22+ sẽ cho bạn thấy phông chữ nào hiện đang được sử dụng , không có bất kỳ tiện ích mở rộng nào.

WhatFont là một tiện ích mở rộng của Chrome sẽ cho bạn biết cụ thể phông chữ nào trong ngăn xếp phông chữ đang được tải.

Đối với các phiên bản hiện tại của Firefox (kể từ phiên bản 7), có một tiện ích bổ sung có tên là "fontinfo" sẽ báo cáo phông chữ thực tế đang được sử dụng (chứ không phải là những gì thuộc tính họ phông chữ CSS nói), có tính đến các trường hợp trình duyệt rơi vào một phông chữ khác nhau vì họ phông chữ được yêu cầu không có sẵn hoặc không hỗ trợ các ký tự được sử dụng trong văn bản.

Bạn có thể thử kiểm tra phần cụ thể đó với Fireorms cho Firefox. Nó sẽ cung cấp cho bạn tất cả các thuộc tính chính xác.

Plugin "Font Downloader" được đề cập bởi jeremy dường như không hoạt động ở đây, đưa ra phông chữ đầu tiên của danh sách CSS bất kể phông chữ được hiển thị thực sự (Firefox 4.0rc1 trên Linux). Tuy nhiên, các plugin sau đây cung cấp cho bạn phông chữ "chính xác".

Phông chữ bối cảnh

Dựa trên cách tiếp cận đo lường văn bản và tập lệnh từ Lalit Patel, tôi đã tạo ra các bookmarklet có thể đoán phông chữ đang được sử dụng cho văn bản hiện được chọn (hoặc body, nếu không có gì được chọn). Nó dường như hoạt động rất tốt đối với tôi để tìm ra phông chữ nào trong ngăn xếp được sử dụng! (Nó không thể cho bạn biết những gìsans-serif thực sự ánh xạ tới.)

Lấy chúng ở đây: https://alanhogan.com/bookmarklets#font-stack-full

Nguồn là trên GitHub .

Xem thêm: CodePen này , sử dụng hầu hết cùng một mã. Hãy thử bằng cách chọn các đoạn khác nhau và xem cập nhật bảng / đoán!