Phiên Hỏi & Đáp hôm nay đến với chúng tôi theo lịch sự của SuperUser - một phân khu 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
Người đọc SuperUser Laurent rất tò mò về lý do tại sao các trang có vẻ như tải các phần tử hoàn toàn khác so với những gì họ đã từng làm một lần. Anh ấy viết:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
Vì vậy, những gì cho? Laurent, và nhiều người trong chúng ta, hãy nhớ một thời gian khi văn bản được tải lên đầu tiên và mọi thứ khác - những hình GIF động, hình nền lát gạch và tất cả các hiện vật khác của duyệt web cuối những năm 90 - đến sau. Điều gì gây ra tình trạng hiện tại của các yếu tố thiết kế đầu tiên, văn bản sau?
Câu trả lời
Người đóng góp SuperUser Daniel Andersson cung cấp một câu trả lời chi tiết tuyệt vời mà có quyền dưới cùng của bí ẩn tại sao-the-fonts-load-last:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
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 kiếm chữ thứ hai và cuối cùng là phông chữ “sans-serif” dự phòng.
Giờ đây, người ta có thể cung cấp URL phông chữ làm quy tắc CSS để trình duyệt tải xuống phông chữ như sau:
@import url(https://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 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 sự cố không có văn bản nào được hiển thị cho đến khi tài nguyên đã được trình duyệt tải, bao gồm thời gian tải xuống, thời gian tải phông và thời gian hiển thị. Tôi hy vọng rằng đây là hiện vật mà bạn đang trải qua.
Ví dụ: một trong những tờ báo quốc gia của tôi, Dagens Nyheter, sử dụng phông chữ web cho tiêu đề của họ, nhưng không phải là khách hàng tiềm năng của họ, 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 ở trên đều được điền với tiêu đề (điều này đúng trên Chrome và Opera, ít nhất là chưa thử người khác).
(Ngoài ra, các nhà thiết kế rải JavaScript hoàn toàn ở mọi nơi trong những ngày này, 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. lần là vấn đề phông chữ trên web được mô tả ở trên, tôi tin.)
Thêm vào:
Câu trả lời này đã trở nên rất được bình chọn, 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à "flash của nội dung không có tính chất" nói chung, và "flash của văn bản unstyled" nói riêng. Tìm kiếm “FOUC” và “FOUT” cho biết thêm thông tin.
Tôi có thể giới thiệu bài đăng của nhà thiết kế web Paul Irish về FOUT liên quan đến phông chữ trên 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 một cách khác nhau. Tôi đã viết ở trên rằng tôi đã thử nghiệm Opera và Chrome, cả hai đều cư xử 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 FOUT theokhông phải hiển thị văn bản phông chữ web với phông chữ dự phòng trong khoảng thời gian tải phông chữ web. Thậm chí nếu phông chữ web được lưu vào bộ nhớ cache, ở đósẽ là độ trễ hiển thị. Có rất nhiều nhận xét trong chuỗi câu hỏi này nói cách khác và rằng hoàn toàn sai khiến 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 trường hợp nào bạn sẽ nhận được FOUT
- Sẽ: Tải xuống và hiển thị một 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 được lưu trong bộ nhớ cache-ttf / otf / we được lưu trong bộ nhớ cache
- 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í cục bộ ()
Vì Chrome đợi cho đến khi nguy cơ FOUT biến mất trước khi hiển thị, điều này sẽ gây ra sự chậm 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 phải trả lại và có lẽ các yếu tố khác, nhưng bộ nhớ đệm không loại bỏ hoàn toàn 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ừ 2011–04–14 ở cuối bài đăng:
- Firefox (tính đến FFb11 và FF4 Chung kết) không còn FOUT nữa! Wooohoo! Http: //bugzil.la/499292 Về cơ bản văn bản là vô hình trong 3 giây, và sau đó nó mang lại phông chữ dự phòng. Webfont có lẽ sẽ tải trong vòng ba giây mặc dù … hy vọng..
- IE9 hỗ trợ WOFF và TTF và OTF (mặc dù nó đòi hỏi một điều bitet nhúng - 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á đang đợi để 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,5s thay vì 3s.
Nếu đây là một câu hỏi dành cho các nhà thiết kế, người ta có thể đi vào những cách để tránh những loại vấn đề như
webfontloader
nhưng đó sẽ là một câu hỏi khác. Liên kết Paul Irish đi sâu hơn vào vấn đề này.
Có cái gì để thêm vào lời giải thích? Âm thanh trong các ý kiến. Bạn muốn đọc thêm câu trả lời từ những người dùng Stack Exchange có hiểu biết công nghệ khác? Xem toàn bộ chuỗi thảo luận tại đây.
