Tải trước phông chữ phông chữ?

Question

Có thể tải trước hoặc bằng cách khác bộ nhớ cache @ phông chữ phông chữ, rất có thể với javascript, trước khi tải trang để bạn không nhận được bước nhảy xấu xí đó khi trang cuối cùng tải?

Answer 1

Tôi không biết bất kỳ kỹ thuật hiện tại nào để tránh nhấp nháy khi tải phông chữ, tuy nhiên bạn có thể giảm thiểu bằng cách gửi tiêu đề bộ nhớ cache phù hợp cho phông chữ của mình và đảm bảo yêu cầu đó đi nhanh nhất có thể.

Answer 2

This nên khắc phục sự cố của bạn.

Để trả lời câu hỏi ban đầu của bạn: có bạn có thể. Chỉ có các trình duyệt Gecko và WebKit mới hỗ trợ nó.
Bạn chỉ cần thêm các thẻ liên kết trong đầu của bạn:

<link rel="prefetch" href="pathto/font"> 
<link rel="prerender" href="pathto/page"> 

Answer 3

Có một vài kỹ thuật để "gia tải" ở đây: http://paulirish.com/2009/fighting-the-font-face-fout/

Chủ yếu là lừa trình duyệt vào download file càng nhanh càng tốt. .

Bạn cũng có thể phân phối dưới dạng dữ liệu-uri, giúp ích rất nhiều. và bạn cũng có thể ẩn nội dung trang và hiển thị nội dung khi sẵn sàng.

Answer 4

tôi đã làm điều này bằng cách thêm một số chữ cái trong tài liệu chính của mình và làm cho nó trong suốt và gán phông chữ mà tôi muốn tải.

ví dụ:

<p>normal text from within page here and then followed by: 
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span> 
</p> 

Answer 5

Gần đây tôi đã làm việc trên một trò chơi tương thích với CocoonJS với DOM giới hạn đối với các yếu tố canvas - đây là cách tiếp cận của tôi:

Sử dụng fillText với một phông chữ mà chưa được nạp nhưng sẽ thực hiện đúng nhưng với không có phản hồi trực quan - vì vậy mặt phẳng canvas sẽ vẫn nguyên vẹn - tất cả những gì bạn phải làm là kiểm tra định kỳ canvas cho bất kỳ thay đổi nào (ví dụ: lặp qua getImageData tìm kiếm bất kỳ pixel không trong suốt) nào sẽ xảy ra khi phông chữ tải đúng cách.

Tôi đã giải thích kỹ thuật này hơn một chút trong bài viết gần đây của tôi http://rezoner.net/preloading-font-face-using-canvas,686

Answer 6

Google có một thư viện đẹp cho điều này: https://developers.google.com/webfonts/docs/webfont_loader Bạn có thể sử dụng hầu hết các phông chữ và các lib sẽ thêm lớp học để các thẻ html.

Nó thậm chí còn cung cấp cho bạn sự kiện javascript khi phông chữ certrain được tải và hoạt động!

Đừng quên phân phối các tệp phông chữ của bạn đã được nén! nó chắc chắn sẽ tăng tốc mọi thứ!

Answer 7

Tải phông chữ thích hợp là một lỗ hổng lớn trong thông số HTML5. Tôi đã trải qua tất cả các công cụ này và giải pháp đáng tin cậy nhất mà tôi đã tìm thấy là sử dụng Phông chữ.js:

http://pomax.nihongoresources.com/pages/Font.js/

Bạn có thể sử dụng nó để tải phông chữ sử dụng API cùng bạn sử dụng để tải hình ảnh

var anyFont = new Font(); 
anyFont.src = "fonts/fileName.otf"; 
anyFont.onload = function() { 
    console.log("font loaded"); 
} 

Đó là đơn giản hơn nhiều và nhiều hơn nữa nhẹ hơn Google's hulking Webfont Loader

Đây là repo github cho Font.js:

https://github.com/Pomax/Font.js

Answer 8

Một kỹ thuật đơn giản là đặt một nơi nào đó trong chỉ số của bạn:

<div class="font_preload" style="opacity: 0"> 
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span> 
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span> 
    ... 
</div> 

Thử nghiệm trên Chrome 34, Safari 7 và FF 29 và IE 11

Answer 9

Via của Google webfontloader

var fontDownloadCount = 0; 
WebFont.load({ 
    custom: { 
     families: ['fontfamily1', 'fontfamily2'] 
    }, 
    fontinactive: function() { 
     fontDownloadCount++; 
     if (fontDownloadCount == 2) { 
      // all fonts have been loaded and now you can do what you want 
     } 
    } 
}); 

Answer 10

2017 : Bạn hiện có preload

MDN: Tải trước valu e thuộc tính rel của phần tử cho phép bạn viết yêu cầu tìm nạp khai báo trong HTML của bạn, chỉ định các tài nguyên mà các trang của bạn sẽ cần ngay sau khi tải, do đó bạn muốn bắt đầu tải trước trong vòng đời của trang tải trước máy móc hiển thị chính của trình duyệt khởi động. Điều này đảm bảo rằng chúng được tạo sẵn trước đó và ít có khả năng để chặn hiển thị đầu tiên của trang, dẫn đến cải thiện hiệu suất.

<link rel="preload" href="/fonts/myfont.eot" as="font" /> 

Kiểm tra browser compatibility.

Điều này hữu ích nhất cho việc tải trước phông chữ (không phải chờ trình duyệt tìm thấy nó ở một số CSS). Bạn cũng có thể tải trước một số biểu trưng, ​​biểu tượng và tập lệnh.

Answer 11

Sử dụng tiêu chuẩn CSS Font Loading API.

Chờ (tất cả) các phông chữ để tải, và sau đó hiển thị nội dung của bạn:

document.fonts.ready.then((fontFaceSet) => { 
    console.log(fontFaceSet.size, 'FontFaces loaded.'); 
    document.getElementById('waitScreen').style.display = 'none'; 
}); 

Demo CodePen.