Tôi đang sử dụng @ phông chữ để nhúng phông chữ trong trang web của mình. Đầu tiên văn bản hiển thị như mặc định của hệ thống, và sau đó (một khi tệp phông chữ đã được tải có lẽ), phông chữ chính xác sẽ hiển thị phần sau của giây sau. Có cách nào để giảm thiểu/thoát khỏi sự chậm trễ này, bằng cách trì hoãn hiển thị trang cho đến khi sau khi phông chữ đã tải hoặc tương tự.Đợi tải phông chữ trước khi hiển thị trang web
Đây là cách trình duyệt hoạt động.
Trước hết @font của bạn được khai báo ở đâu? Nó có phải là nội tuyến trong HTML của bạn, được khai báo trong một trang CSS trên trang hoặc (hy vọng) được khai báo trong một trang CSS bên ngoài không?
Nếu nó không nằm trong trang tính bên ngoài, hãy thử di chuyển nó sang một trang (đây là cách thực hành tốt hơn thường xuyên).
Nếu điều này không hiệu quả, bạn cần tự hỏi mình là phần nhỏ của sự khác biệt thứ hai có thực sự gây bất lợi cho trải nghiệm người dùng không? Nếu có, hãy xem xét JavaScript, có một vài điều bạn có thể thực hiện, chuyển hướng, tạm dừng, v.v. nhưng thực tế đó có thể là tồi tệ hơn so với vấn đề ban đầu. Tồi tệ hơn cho người dùng và tệ hơn để duy trì.
Liên kết này có thể giúp:
Điều tốt nhất bạn có thể làm là làm theo lời khuyên của Tom và, ngoài ra, hãy đảm bảo khách hàng của bạn không truy cập vào máy chủ Web khi tải trang tiếp theo, vì đó là trình chặn hiển thị phông chữ thực - đặt tiêu đề hết hạn cho tệp CSS và whooping một trên tài nguyên font thực tế và tốt của bạn để đi. –
Bài viết hay. Cho phép hy vọng Firefox thông qua phương pháp tiếp cận safari để tải phông chữ trong một bản phát hành không xa quá xa. FOUT không phải là một vấn đề đối với tôi trong quá khứ, nhưng đối với trang web hiện tại tôi đang làm việc trên phông chữ tùy chỉnh là rất khác với bất kỳ phông chữ hệ thống nào, vì vậy lần đầu tiên flash rất đáng chú ý. – wheresrhys
Phông chữ lớn (tức là 200 Kb) và kết nối chậm (tức là 3G) không phải là một phần nhỏ của giây. Nhà thiết kế nên xem xét kịch bản này cho những người có máy tính bảng có chip SIM. – Jaime
Có lẽ một cái gì đó như thế này:
$("body").html("<img src='ajax-loader.gif' />");
Sau đó, khi tải trang, thay thế nội dung cơ thể với nội dung thực tế và hy vọng, phông chữ render đầy đủ, bạn có thể phải chơi xung quanh với điều này mặc dù ...
Chỉ tải IE đầu tiên phông chữ và sau đó là phần còn lại của trang. Các trình duyệt khác tải mọi thứ đồng thời vì một lý do. Hãy tưởng tượng rằng có vấn đề với máy chủ lưu trữ phông chữ hoặc với việc tải xuống phông chữ. Bạn sẽ treo toàn bộ trang web của mình cho đến khi phông chữ được tải. Theo ý kiến của tôi, đèn flash của văn bản chưa được đặt trước tốt hơn là không nhìn thấy trang web ở tất cả
Vâng, ngoại trừ khi bạn đang lưu trữ phông chữ trên cùng một trang web. –
Ngoài ra, ngoại trừ khi phông chữ là biểu tượng bootstrap glyph –
Ngoài ra, ngoại trừ khi bạn cần biết kích thước pixel của hình tượng. –
Joni Korpi có một bài viết hay về tải phông chữ trước phần còn lại của trang.
http://jonikorpi.com/a-smoother-page-load/
Ông cũng sử dụng một loading.gif để làm giảm bớt sự chậm trễ vì vậy người dùng sẽ không được nản lòng.
(function() {
document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
})();
sử dụng phương pháp này .. sử dụng với Webfont.js
Edit: Cách tiếp cận tốt nhất có lẽ là để base64 mã hóa phông chữ của bạn thành một file CSS. Điều này có nghĩa là phông chữ của bạn sẽ phải được tải đầy đủ theo thời gian HTML của bạn được phân tích cú pháp và hiển thị. Bạn có thể làm điều này với máy phát điện webfont của font squirrel https://www.fontsquirrel.com/tools/webfont-generator bằng cách nhấp vào "Expert" và sau đó "base64 encode". Đây là cách các dịch vụ như TypeKit hoạt động.
Original câu trả lời: Một cách khác để phát hiện nếu phông chữ được nạp sẽ được sử dụng FontLoader https://github.com/smnh/FontLoader hoặc bằng cách sao chép chiến lược của họ.
Chúng liên kết với sự kiện cuộn trong trình duyệt, bởi vì khi phông chữ tải nó sẽ thay đổi kích thước văn bản. Nó sử dụng hai div chứa (sẽ di chuyển khi chiều cao thay đổi) và một dự phòng riêng cho IE.
Cách khác là kiểm tra định kỳ DOM với setInterval, nhưng việc sử dụng sự kiện javascript nhanh hơn và vượt trội hơn rất nhiều.
Rõ ràng, bạn có thể làm một cái gì đó như đặt độ mờ của cơ thể thành 0 và sau đó hiển thị nó trong khi phông chữ tải.
Sử dụng https://github.com/typekit/webfontloader
và kiểm tra các sự kiện trong cấu hình https://github.com/typekit/webfontloader#configuration
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: [ 'CustomFont1', 'CustomFont2' ]
},
active: function() {
//render your page
},
});
</script>
Bạn có thể sử dụng CSS font-hiển thị bên @ font-face của bạn. Các từ khóa cho tất cả các giá trị có sẵn là:
Giulio Mainardi đã viết một bài viết thú vị về tất cả trong số họ và bạn nên sử dụng vị trí nào trên vị trí trên.
Bạn có thể đọc tại đây: https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email
Phông chữ bộ đệm sẽ hoạt động. – Krii
Hãy nhớ rằng đây là một cách hay để làm cho trang web của bạn xuất hiện rất chậm, bởi vì người dùng trên liên kết không dây có thể mất một lúc để tải phông chữ web. Nhiều người dùng sẽ chỉ nhấn nút quay lại nếu văn bản không hiển thị sau vài giây. – erjiang