Tìm Font bằng Chrome & Firefox DevTools

Browser DevTools cho phép bạn kiểm tra font chính xác được render trên bất kỳ phần tử nào. Đây là cách sử dụng - và khi nào URL scanner là lựa chọn nhanh hơn.

Chrome DevTools - Rendered Fonts

  1. 1Nhấp chuột phải vào bất kỳ văn bản nào trên trang và chọn Inspect (hoặc nhấn Ctrl+Shift+I / Cmd+Option+I).
    Menu ngữ cảnh nhấp chuột phải Chrome với Inspect được tô sáng màu xanh
    Xem ảnh chụp màn hình đầy đủ
    Nhấp chuột phải vào bất kỳ văn bản nào, sau đó nhấp Inspect
  2. 2Chrome mở panel Elements với phần tử được nhấp đã được tô sáng trong cây DOM.
  3. 3Trong panel bên phải, nhấp tab Computed (tab thứ hai, bên cạnh Styles).
  4. 4Cuộn xuống qua các thuộc tính CSS đến phần Rendered Fonts.
    Tab Computed Chrome DevTools hiển thị Rendered Fonts: Inter Variable từ file woff2
    Xem ảnh chụp màn hình đầy đủ
    Tab Computed - cuộn đến "Rendered Fonts" để xem typeface đang hoạt động
  5. 5Bạn thấy typeface chính xác mà trình duyệt đã sử dụng, file nguồn đã tải và số lượng glyph đã vẽ.

Firefox DevTools - Tab Fonts

  1. 1Nhấp chuột phải vào bất kỳ văn bản nào và chọn Inspect (hoặc nhấn F12). Panel Inspector mở ra.
  2. 2Trong panel bên phải của Inspector (nơi thường thấy Rules và Computed), nhấp tab Fonts.
  3. 3Cột bên trái liệt kê mọi font được tải trên trang. Nhấp tên font để xem mẫu chữ, phạm vi độ đậm, định dạng và URL nguồn.
    Tab Fonts Firefox DevTools - Inter Variable được chọn, hiển thị mẫu chữ và chi tiết
    Xem ảnh chụp màn hình đầy đủ
    Tab Fonts Firefox - tất cả font trang ở bên trái, chi tiết ở bên phải

Giới hạn của phương pháp DevTools

DevTools rất tốt để kiểm tra các phần tử riêng lẻ, nhưng sẽ không cung cấp cho bạn danh sách đầy đủ mọi font được tải bởi trang. Bạn cần nhấp qua từng phần tử văn bản thủ công. Để kiểm tra toàn diện - dán URL bên dưới.

Nhanh hơn: Quét toàn bộ trang bằng URL

Dán bất kỳ URL nào và nhận danh sách đầy đủ tất cả web font được sử dụng - mọi quy tắc @font-face, import Google Fonts và liên kết CDN - trong một lần quét.

Câu hỏi thường gặp

"Rendered Fonts" trong Chrome là gì?

Rendered Fonts hiển thị typeface thực tế mà trình duyệt đã sử dụng để vẽ văn bản được chọn - sau khi áp dụng các fallback font-family. Nó có thể khác với khai báo CSS font-family.

Tại sao rendered font khác với CSS font-family?

font-family là danh sách fallback có ưu tiên. Nếu font đầu tiên không tải được (file thiếu, lỗi CORS), trình duyệt chuyển sang ứng viên tiếp theo. Rendered Fonts hiển thị những gì thực sự được sử dụng.

Tôi có thể tìm tất cả font trên trang bằng DevTools không?

Tab Fonts của Firefox hiển thị mọi font được tải bởi trang. Chrome yêu cầu kiểm tra từng phần tử một. Để có danh sách tự động đầy đủ, hãy sử dụng URL scanner ở trên.

URL scanner có phát hiện Google Fonts không?

Có - tất cả nguồn font đều được phát hiện: Google Fonts, Bunny Fonts, Fontshare và font @font-face tự host.

Quay lại công cụ kiểm tra font