Câu trả lời của Công cụ cho nhà phát triển – Phông chữ đó là gì?

Công cụ của Chrome hiện có thể cho bạn biết chính xác kiểu chữ nào đang được dùng để hiển thị văn bản.

Ngăn xếp phông chữ là một điều thú vị, mang tính gợi ý hơn là yêu cầu. Vì nhóm gia đình bạn đề xuất có thể không hiện diện nên bạn đang để trình duyệt của từng người dùng xử lý trường hợp dự phòng bằng cách chọn một ứng dụng hoạt động hiệu quả và sử dụng nhóm gia đình đó.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Là nhà phát triển, bạn muốn biết phông chữ nào đang thực sự đang được sử dụng. Cách hoạt động như sau:

Bộ phông chữ trong công cụ cho nhà phát triển

Trong phần Kiểu tính toán, bạn sẽ thấy thông tin tóm tắt về(các) kiểu chữ được dùng cho phần tử đó. Có một vài điều cần lưu ý ở đây:

  • Công cụ cho nhà phát triển đang báo cáo kiểu chữ thực tế mà lớp hiển thị văn bản của Chrome sử dụng. Không còn phải đoán phông chữ serif hoặc sans-serif thực sự đang phân giải.
  • Phông chữ web của tôi có đang hoạt động không? Đôi khi rất khó để biết liệu bạn đang thấy phông chữ web hay phông chữ hệ thống dự phòng. Bây giờ, bạn có thể xác minh rằng phông chữ web đang được áp dụng. Trong ví dụ trên, chúng tôi đang kéo Tôm hùm xuống làm phông chữ web cho kiểu ::first-line.
  • Phông chữ thu gọn trong ngăn xếp của bạn rất dễ nhận ra. Ở trên, chúng tôi có lỗi chính tả là Merri phù hợp nên nó không được sử dụng nên được chuyển cho Lobster.
  • Đó là trường hợp Chromebook hay Roboto? Hãy hỏi một nhà thiết kế hoặc... hỏi Công cụ cho nhà phát triển. ;)
  • Hoạt động tốt với các phông chữ Google Webfonts, Typekit, phông chữ địa phương, kiểu chữ @font-face, phông chữ unicode và tất cả các nguồn phông chữ thú vị khác.

Hãy thưởng thức và vui lòng để lại bình luận nếu bạn có ý kiến phản hồi.