Paul Irish
Giờ đây, Chrome DevTools có thể cho bạn biết chính xác kiểu chữ đ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ị, giống như một đề xuất hơn là một yêu cầu. Vì gia đình bạn đề xuất có thể không xuất hiện, nên bạn sẽ cho phép trình duyệt của mỗi người dùng xử lý trường hợp chuyển tiếp, lấy một giá trị có thể hoạt động và sử dụng giá trị đó.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
Là một nhà phát triển, bạn nên biết phông chữ nào thực sự đang được sử dụng. Cách hoạt động như sau:
Trong Kiểu tính toán, bạn sẽ thấy tóm tắt(các) kiểu chữ được dùng cho phần tử đó. Sau đây là một số điều cần lưu ý:
- Công cụ của Chrome cho nhà phát triển đang báo cáo phông chữ thực tế mà lớp hiển thị văn bản của Chrome sử dụng. Bạn không cần phải đoán xem
serifhoặcsans-serifthực sự đang phân giải phông chữ nào nữa. - Phông chữ web của tôi có hoạt động không? Đôi khi, bạn khó có thể biết được mình đang nhìn 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 ta sẽ kéo Lobster xuống làm phông chữ web cho kiểu
::first-line. - Dễ nhận ra phông chữ mùa thu trong nhóm ảnh. Ở trên, chúng ta có lỗi chính tả Merriweather nên phông chữ này không được sử dụng, chuyển sang Lobster.
- Đó là phông chữ Arial hay Helvetica? Hãy hỏi nhà thiết kế hoặc… hỏi Công cụ cho nhà phát triển. ;)
- Hoạt động hiệu quả với Google Webfonts, Typekit, phông chữ cục bộ, kiểu chữ @font-face, ký tự unicode và tất cả các nguồn phông chữ thú vị khác.
Hãy trải nghiệm và để lại bình luận nếu bạn có ý kiến phản hồi.