Nếu bạn có xu hướng xem ngăn trình duyệt với con mắt đại bàng, bạn có thể nhận thấy rằng các trang thường tải hình ảnh và bố cục của chúng trước khi tải văn bản của chúng - kiểu tải hoàn toàn ngược lại mà chúng tôi đã trải qua trong những năm 1990. Chuyện gì đang xảy ra?
Phiên Hỏi & Đáp hôm nay đến với chúng tôi với sự hỗ trợ của SuperUser — một phần của Stack Exchange, một nhóm các trang web Hỏi & Đáp do cộng đồng điều hành.
Câu hỏi
Độc giả Laurent của SuperUser rất tò mò về lý do chính xác các trang dường như tải các phần tử hoàn toàn khác so với trước đây. Anh ấy viết:
Tôi nhận thấy rằng gần đây nhiều trang web hiển thị văn bản chậm. Thông thường, nền, hình ảnh, v.v. sẽ được tải, nhưng không có văn bản. Sau một thời gian, văn bản bắt đầu xuất hiện ở đây và ở đó (không phải lúc nào cũng xuất hiện tất cả cùng một lúc).
Về cơ bản, nó hoạt động ngược lại như trước đây, khi văn bản được hiển thị trước, sau đó là hình ảnh và phần còn lại được tải sau đó. Công nghệ mới nào đang tạo ra vấn đề này? Bất kỳ ý tưởng?
Lưu ý rằng tôi đang sử dụng kết nối chậm, điều này có thể làm nổi bật sự cố.
Hãy xem [above] để làm ví dụ - mọi thứ đã được tải nhưng phải mất thêm vài giây trước khi văn bản cuối cùng được hiển thị.
Vì vậy, những gì cho? Laurent, và nhiều người trong chúng ta, nhớ về thời điểm khi văn bản được tải trước và mọi thứ khác - ảnh GIF động trang trí, nền lát gạch và tất cả các tạo tác khác của trình duyệt web cuối những năm 90 - đến sau này. Nguyên nhân nào dẫn đến tình trạng yếu tố thiết kế trước, văn bản sau?
Câu trả lời
Cộng tác viên của SuperUser, Daniel Andersson, đưa ra một câu trả lời tuyệt vời chi tiết đến tận đáy của bí ẩn tại sao-phông-chữ-tải-cuối cùng:
Một lý do là các nhà thiết kế web ngày nay thích sử dụng phông chữ web (thường là WOFF định dạng), ví dụ: xuyên qua Google Web fonts .
Trước đây, các phông chữ duy nhất có thể được hiển thị trên một trang web là những phông chữ mà người dùng đã cài đặt cục bộ. Vì v.d. Người dùng Mac và Windows không nhất thiết phải có phông chữ giống nhau, các nhà thiết kế theo bản năng luôn xác định các quy tắc như
font-family: Arial, Helvetica, sans-serif;trong đó, nếu không tìm thấy phông chữ đầu tiên trên hệ thống, trình duyệt sẽ tìm phông chữ thứ hai và cuối cùng là phông chữ “sans-serif” dự phòng.
Bây giờ, người ta có thể cung cấp URL phông chữ dưới dạng quy tắc CSS để trình duyệt tải xuống phông chữ, chẳng hạn như:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);và sau đó tải phông chữ cho một phần tử cụ thể bằng cách ví dụ:
font-family: 'Droid Serif', sans-serif;Điều này rất phổ biến để có thể sử dụng phông chữ tùy chỉnh, nhưng nó cũng dẫn đến vấn đề không có văn bản nào được hiển thị cho đến khi tài nguyên đã được tải bởi trình duyệt, bao gồm thời gian tải xuống, thời gian tải phông chữ và thời gian hiển thị. Tôi mong đợi rằng đây là tạo tác mà bạn đang trải nghiệm.
Ví dụ: một trong những tờ báo quốc gia của tôi, Tin tức ngày hôm nay , sử dụng phông chữ web cho tiêu đề của họ, nhưng không sử dụng khách hàng tiềm năng, vì vậy khi trang web đó được tải, tôi thường thấy khách hàng tiềm năng đầu tiên và nửa giây sau tất cả các khoảng trống phía trên được điền bằng tiêu đề (điều này đúng trên Chrome và Opera, tại ít nhất. Chưa thử người khác).
(Ngoài ra, những ngày này, các nhà thiết kế rắc JavaScript hoàn toàn ở khắp mọi nơi, vì vậy có thể ai đó đang cố gắng làm điều gì đó thông minh với văn bản, đó là lý do tại sao nó bị trì hoãn. tôi tin là vấn đề phông chữ web được mô tả ở trên.)
Thêm vào:
Câu trả lời này trở nên rất được ủng hộ, mặc dù tôi không đi sâu vào chi tiết, hoặc có lẽ bởi vì điều này. Đã có nhiều nhận xét trong chuỗi câu hỏi, vì vậy tôi sẽ cố gắng mở rộng một chút […]
Hiện tượng này rõ ràng được gọi là “hiện tượng lóe sáng của nội dung chưa được đánh mẫu” nói chung và “hiện tượng lóe sáng của văn bản chưa được đánh mẫu” nói riêng. Tìm kiếm “FOUC” và “FOUT” cung cấp thêm thông tin.
Tôi có thể đề nghị Bài đăng của nhà thiết kế web Paul Irish trên FOUT liên quan đến phông chữ web .
Những gì người ta có thể lưu ý là các trình duyệt khác nhau xử lý điều này khác nhau. Tôi đã viết ở trên rằng tôi đã thử nghiệm Opera và Chrome, cả hai đều hoạt động tương tự. Tất cả các ứng dụng dựa trên WebKit (Chrome, Safari, v.v.) đều chọn để tránh BẮT ĐẦU bởi không phải kết xuất văn bản phông chữ web với phông chữ dự phòng trong thời gian tải phông chữ web. Thậm chí nếu phông chữ web được lưu trong bộ nhớ cache, ở đó sẽ là một sự chậm trễ kết xuất . Có rất nhiều bình luận trong chuỗi câu hỏi này nói khác và rằng thật sai lầm khi các phông chữ được lưu trong bộ nhớ cache hoạt động như thế này, nhưng ví dụ: từ liên kết trên:
Trong những trường hợp nào bạn sẽ nhận được một FOUT
- Sẽ: Tải xuống và hiển thị ttf / otf / woff từ xa
- Sẽ: Hiển thị ttf / otf / woff được lưu trong bộ nhớ cache
- Sẽ: Tải xuống và hiển thị dữ liệu-uri ttf / otf / woff
- Sẽ: Hiển thị dữ liệu đã lưu trong bộ nhớ cache-uri ttf / otf / woff
- Sẽ không: Hiển thị phông chữ đã được cài đặt và đặt tên trong ngăn xếp phông chữ truyền thống của bạn
- Sẽ không: Hiển thị phông chữ đã được cài đặt và đặt tên bằng vị trí local ()
Vì Chrome đợi cho đến khi BỐN nguy cơ biến mất trước khi hiển thị, điều này gây ra độ trễ. Mà mức độ hiệu ứng có thể nhìn thấy (đặc biệt là khi tải từ bộ nhớ cache) dường như phụ thuộc vào số lượng văn bản cần được hiển thị và có lẽ là các yếu tố khác, nhưng bộ nhớ đệm không hoàn toàn loại bỏ hiệu ứng.
Ailen cũng có một số cập nhật liên quan đến hành vi của trình duyệt kể từ năm 2011–04–14 ở cuối bài đăng:
- Firefox (kể từ FFb11 và FF4 Final) không còn BỐN! Tuyệt vời! http://bugzil.la/499292 Về cơ bản, văn bản sẽ ẩn trong 3 giây và sau đó nó sẽ trả về phông chữ dự phòng. Tuy nhiên, webfont có thể sẽ tải trong vòng ba giây đó… hy vọng là ..
- IE9 hỗ trợ WOFF và TTF và OTF (mặc dù nó yêu cầu một chút nhúng thiết lập điều - chủ yếu là tranh luận nếu bạn sử dụng WOFF). TUY NHIÊN!!! IE9 có FOUT. :(
- Webkit có một bản vá chờ hạ cánh để hiển thị văn bản dự phòng sau 0,5 giây. Vì vậy, hành vi tương tự như FF nhưng 0,5 giây thay vì 3 giây.
Nếu đây là một câu hỏi dành cho các nhà thiết kế, người ta có thể tìm cách để tránh những loại vấn đề này như
webfontloader, nhưng đó sẽ là một câu hỏi khác. Liên kết Paul Ailen đi vào chi tiết hơn về vấn đề này.
Có điều gì đó để thêm vào lời giải thích? Tắt âm thanh trong các bình luận. Bạn muốn đọc thêm câu trả lời từ những người dùng Stack Exchange am hiểu công nghệ khác? Kiểm tra toàn bộ chuỗi thảo luận tại đây .
