Sử dụng Web font loader để loại bỏ FOUT
CSS3
53
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.
818 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
126 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 3 năm trước
126 30
White
100 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 hơn 3 năm trước
100 4
White
68 7
Form là thành phần quan trọng nhất khi design flow đăng ký của 1 web hay 1 app, dù là view gồm nhiều bước hay chỉ là một màn hình đơn điệu. Bài này...
Vu Nhat Minh viết gần 2 năm trước
68 7
Bài viết liên quan
White
33 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 3 năm trước
33 8
White
18 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 gần 3 năm trước
18 10
White
6 0
Chắc hẳn không ít các bạn khi code web thường hay cân nhắc việc sử dụng đơn vị như thế nào cho hợp lý mà lại hiệu quả. Nào là code trên desktop rồi...
Trần Anh Tuấn viết 8 ngày trước
6 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
818 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á!