Làm thế nào để tải phông chữ bên ngoài thông qua javascript trước khi trang đã sẵn sàng

Tôi đang sử dụng typekit trên trang web của tôi để tải phông chữ và typekit cho tôi 2 liên kết.Làm thế nào để tải phông chữ bên ngoài thông qua javascript trước khi trang đã sẵn sàng

<script src="https://use.typekit.net/xxxx.js"></script> 
<script>try { Typekit.load({ async: false }); } catch (e) { }</script>

Tôi đặt các liên kết này vào thẻ đầu nhưng khi tôi nhập phông chữ trang web được tải sau nội dung. Tôi tự hỏi làm thế nào nó có thể tải trước khi trang sẵn sàng hoặc trước khi tải nội dung.

PS: Tôi đã thử không đồng bộ: đúng và sai .. Cả hai đều cho kết quả tương tự.

Nguồn

2016-07-11 Tolga Kısaoğulları

Có bất kỳ dòng nào khác giữa các liên kết phông chữ và '' không? Điều này có thể gây ra sự cố. –

Không .. Tôi đã thử như bạn đã nói bên dưới –

Bạn có thể vui lòng cung cấp tất cả mã bên trong phần tử '' của bạn không? Một ví dụ trực tiếp cũng sẽ giúp bạn dễ dàng. –

Một thứ bạn có thể sử dụng là Phông chữ Evens để ẩn nội dung trong khi phông chữ tải. https://helpx.adobe.com/typekit/using/font-events.html

Nguồn

2016-07-11 11:28:48 exabyssus

Tôi đoán đây là cách duy nhất nhưng tôi không thích nó nhưng tôi nghĩ rằng tôi sẽ sử dụng css như thế. .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading p, .wf-loading span, .wf-loading a, .wf-loading button, .wf-loading input [ type = submit] { khả năng hiển thị: bị ẩn; } –

Bạn cũng có thể triển khai màn hình tải. Từ quan điểm của UX, nó hơi khó chịu hơn nhưng trông đẹp hơn. – exabyssus

Có bạn đúng nhưng tôi ước rằng đó là giải pháp mà phông chữ được tải xuống qua js trước khi tải nội dung. Cảm ơn mọi người rất nhiều vì đã giúp đỡ –

Bạn có thể thử window.onpaint nếu chỉ cần đặt liên kết phông chữ đến <head> không hoạt động.

<head> 
    <script src="https://use.typekit.net/xxxx.js"></script> 
</head>

Sau đó;

<script type="text/javascript"> 
    function preloadFunc() 
    { 
     try { Typekit.load({ async: false }); } catch (e) { } 
    } 
    window.onpaint = preloadFunc(); 
</script>

Nguồn

2016-07-11 11:36:01

Tôi đã thử nhưng nó không hoạt động –

Làm thế nào để tải phông chữ bên ngoài thông qua javascript trước khi trang đã sẵn sàng

Trả lời

Các vấn đề liên quan