Chúng tôi tạm nghỉ việc tìm kiếm để giải quyết một vấn đề nhỏ.
“FOUT” là “Flash của văn bản chưa được định kiểu”. Đây là hiện tượng mà các phông chữ @ font-face mất một chút thời gian để tải và do đó bạn thấy phông chữ dự phòng trước phông chữ tùy chỉnh. Đây thường không phải là vấn đề trong Typekit. Nó cũng không thực sự là một vấn đề trong các trình duyệt hiện đại ngày nay (ngoại trừ IE 9). Tuy nhiên, đó là một vấn đề đối với chúng tôi vì chúng tôi đã đặc biệt chọn tải JavaScript Typekit một cách không đồng bộ.
Tuy nhiên, hy vọng không bị mất đi, Typekit đã giải quyết được vấn đề này, chúng tôi chỉ cần thực hiện một chút công việc trên trang web của mình. Chúng tôi đặt một tên lớp mới cho phần tử được gọi là “wf-loading” (tải phông chữ web). Sau đó, trong CSS của chúng tôi, chúng tôi tuyên bố rằng bất kỳ bộ chọn nào sử dụng phông chữ tùy chỉnh sẽ bị ẩn rõ ràng cho đến khi tên lớp đó biến mất. Bạn có thể nghĩ đến một chút rủi ro, nhưng nếu phông chữ không tải được thì sẽ có thời gian chờ để xóa lớp đó. Đây chỉ là để chiến đấu FOUT, hãy nhớ, chỉ là một chút đẹp về hình ảnh.
Chúng tôi thực hiện tất cả những điều này bằng cách tạo một Sass nhỏ @mixingọi là "PreventFOUT" và đặt @includenó trong các ngăn xếp phông chữ tùy chỉnh của chúng tôi, cũng @mixinlà s.
Điều này làm việc tốt cho chúng tôi bây giờ. Cuối cùng trong thiết kế này, chúng tôi chuyển sang phông chữ HF&J trong đó tải trực tiếp qua @ font-face, vì vậy về cơ bản chúng tôi không còn lo lắng về điều này.