Sử dụng Web font loader để loại bỏ FOUT
CSS3
43
White

Vu Nhat Minh viết ngày 23/05/2015

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đợ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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

54 bài viết.
777 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
120 30
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết gần 3 năm trước
120 30
White
93 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết 3 năm trước
93 4
White
62 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết gần 3 năm trước
62 5
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
White
3 2
Viết và chia sẻ code online với fiddle Trước khi giới thiệu fiddle là gì, mình xin kể các bạn nghe 1 câu chuyện "có thật" sau. Một hôm nọ, khi mìn...
Huy Hoàng Phạm viết hơn 2 năm trước
3 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
777 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!