FOUT

FOUT là viết tắt của "flash of unstyled text", là hiện tượng xảy ra ở Firefox/Opera khi dùng @font-face trong CSS.
Firefox hay Opera nếu chưa load được font hoàn toàn thì sẽ hiển thị theo font có sẵn và điều chỉnh lại khi load xong., trong khi các browser webkit như Chrome và Safari sẽ ẩn text và đợi đến khi load xong sẽ hiện toàn bộ. Điều này dẫn đến một hiệu ứng nháy ở firefox/opera, gọi là FOUT ở trên.

Firefox/Opera:

Chrome/Safari

Vì vậy để điều chỉnh hiển thị của FIrefox/Opera theo webkit thì có thể sử dụng thư viện Web font loader của Typekit

Sử dụng Web font loader

Đầu tiên bạn cần load thự viện web font loader vào trang web như sau

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Sau đó gọi hàm khởi tạo trong Javascript. Dưới đây là ví dụ đối với custom font tên là MyFonts có sẵn

WebFont.load({
    custom: {
      families: ['MyFonts']
    }
  });

Như vậy là tất cả những đoạn text dùng MyFonts trong trang web đã được nhúng vào web font loader. Web font loader định nghĩa 3 class tương ứng với 3 event cùa font load

/* Class được gán cho các điv trong quá trình load */
.wf-loading {
}
/* Class được gán cho các điv đã load thành công */
.wf-active {
}
/* Class được gán cho các điv không thể load được */
.wf-inactive {
}

Khi browser bắt đầu load file font về máy của user, tất cả các div được định nghĩa theo font đã được nhúng sẽ tự động được thêm class wf-loading. Khi file được load xong, class ở trên được gỡ đi và thay vào đó là wf-active hoặc wf-inative tuỳ vào kết quả load. Vì vậy nếu bạn muốn hide toàn bộ nội dung và đợi đến khi browser load xong file font mới hiển thị như cách làm ở webkit, bạn chỉ cần thêm một rule cho CSS như sau

.wf-loading {
  visibility:hidden;
}

Thật đơn giản phải không :) Web font loader còn một số cách sử dụng nâng cao và có thể tham khảo tại Github Repo. Nếu có thời gian mình sẽ write up cụ thể hơn.