Cách biết khi nào phông chữ đã được áp dụng

Question

Tôi hiện đang xây dựng trang web công ty cho khách hàng sử dụng phông chữ tùy chỉnh rộng rãi.

Trên jQuery sẵn sàng DOM Tôi đang thực hiện tính toán vị trí để tìm ra nơi một số menu bật lên có chiều rộng và chiều cao động phải được đặt dựa trên nội dung động của chúng.

Những tính toán này không thành công, vì DOM sẵn sàng được kích hoạt trước khi áp dụng phông chữ và do đó chiều rộng và chiều cao không chính xác.

Ngay bây giờ (đối với nguyên mẫu) tôi đang thực hiện các phép tính 500ms sau khi DOM sẵn sàng để giảm bớt vấn đề này, nhưng điều này không thể đi vào sản xuất vì lý do rõ ràng.

Sự cố đã được quan sát thấy trong Firefox và chrome mới nhất. IE 8 dường như không có vấn đề, nhưng sau đó đám cháy sẵn sàng DOM khá muộn, vì vậy sự chậm trễ là loại xây dựng trong tôi đoán :)

Đang chờ sự kiện tải không phải là một lựa chọn, vì vậy câu hỏi của tôi bạn là:

Có cách nào đáng tin cậy để tìm ra khi áp dụng phông chữ?

Answer 1

Tôi đã tìm thấy giải pháp sau khi tự hỏi tại sao IE không gặp phải vấn đề này.

Firefox và Chrome/Safari kích hoạt sự kiện DOMContentLoaded trước khi áp dụng phông chữ, do đó gây ra sự cố.

Giải pháp là để không nghe cho DOMContentLoaded nhưng thay vì đi oldschool và nghe onreadystatechange và đợi cho đến khi document.readyState === 'complete' mà luôn được kích hoạt sau khi font-face được áp dụng (như xa như tôi có thể biết được các bài kiểm tra của tôi) - đó là của tất nhiên những gì luôn xảy ra trong IE vì nó không hỗ trợ DOMContentLoaded.

Vì vậy, về cơ bản bạn có thể cuộn-của riêng bạn sự kiện trong jQuery gọi fontfaceapplied - có thể nó sẽ được xây dựng tại;)

document.onreadystatechange = function() { 
    if (document.readyState === 'complete') 
     $(document).trigger('fontfaceapplied'); 
}; 

thực tế vui: Opera làm nó đúng và chờ đợi để kích hoạt DOMContentLoaded cho đến phông chữ -face được áp dụng.

Answer 2

Đặt chức năng kích hoạt sau khi hết thời gian chờ 200ms giải quyết vấn đề này khi sử dụng Google Fonts.

Có một bước nhảy đáng chú ý, nhưng thường có độ cao bằng nhau, đối với những người theo chủ nghĩa thuần túy, điều này có thể không hoàn hảo nhưng nó hoạt động trên trình duyệt chéo.