Thiếu tiêu đề phản hồi của tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
Trình duyệt:
- Firefox (3,5+)
- Internet Explorer (9 trở lên)
- Chrome (37 trở lên)
Tổng quan
Chrome, Firefox và các phiên bản mới hơn của Internet Explorer thực thi tiêu chuẩn Chia sẻ tài nguyên trên nhiều nguồn gốc và do đó chỉ hiển thị các phông chữ web được phân phát với tiêu đề phản hồi “Access-Control-Allow-Origin” phù hợp. Khi có thể xem Google Fonts trên bất kỳ miền nào, các phông chữ sẽ được phân phát với tiêu đề phản hồi sau:
Access-Control-Allow-Origin:*
Nguyên nhân có thể xảy ra
Một số proxy có thể loại bỏ tiêu đề khỏi phản hồi, sau đó trình duyệt sẽ không hiển thị phông chữ.
Chẩn đoán
Với Chrome, hãy kiểm tra thông báo cảnh báo liên quan trong Bảng điều khiển DevTools.
Với Firefox, người dùng có thể sử dụng tiện ích Firebug hoặc Tiêu đề HTTP trực tiếp để xem tiêu đề phản hồi nhằm xác nhận sự hiện diện của tiêu đề phản hồi CORS.
Đường liên kết
Phông chữ web không hiển thị trên Firefox khi bạn cài đặt trình bổ trợ NoScript
Trình duyệt: * Firefox (3.5 trở lên)
Tổng quan
Firefox không hiển thị phông chữ web khi trình bổ trợ NoScript được cài đặt.
Nguyên nhân có thể xảy ra
Theo mặc định, plugin NoScript tắt các quy tắc @font-face.
Giải pháp
Mở Lựa chọn NoScript, chuyển đến thẻ Nhúng và bỏ chọn: Forbid @font-face
Phông chữ web không hiển thị
Trình duyệt: * Tất cả
Tổng quan
Phông chữ trên web được sử dụng không hiển thị.
Nguyên nhân có thể xảy ra
Có lỗi trong URL API hoặc kiểu mà phông chữ không được yêu cầu hỗ trợ.
Giải pháp
Đảm bảo rằng URL được định dạng đúng, chữ hoa chữ thường tương ứng với tên của phông chữ (ví dụ: Droid Serif không bị droid serif) có cú pháp cho trọng số và kiểu cũng như cú pháp để tải nhiều nhóm (xem tài liệu: Bắt đầu – Cú pháp). Khi phông chữ không hiển thị, việc xem xét nội dung của biểu định kiểu có thể cung cấp thêm thông tin về lỗi. Sao chép và dán URL vào trình duyệt của bạn và đảm bảo rằng bạn không thấy thông báo lỗi nào. Ví dụ: yêu cầu trọng lượng không được hỗ trợ bởi Droid Serif sẽ hiển thị thông báo lỗi sau:
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
Phông chữ web sẽ trông dày hơn khi được sử dụng trong một tiêu đề
Trình duyệt: * Tất cả
Tổng quan
Phông chữ sẽ trông dày hơn khi được sử dụng trong tiêu đề (h1, h2, v.v.) mặc dù phông chữ có trọng số bình thường (400).
Nguyên nhân có thể xảy ra
Trình duyệt đã tự động in đậm văn bản.
Giải pháp
Đảm bảo rằng bạn đã chỉ định đúng trọng số phông chữ trong quy tắc CSS khi áp dụng phông chữ cho một tiêu đề:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}