動態加載字體

我的項目需要大約150種字體。加載所有字體最初會增加頁面加載時間。動態加載字體

我試過谷歌搜索，但無法找到答案。

場景：

用戶將從<select>標籤選擇一種字體option。並且在點擊，我有動態檢索字體和確保字體是由瀏覽器渲染，然後使用字體避免無樣式文本的閃存（FOUT）

目前我使用AJAX到請求字體文件

 $.ajax({ 
     type: 'GET', 
     url: "font-file-url", 
     async:false, 
     success: function(data) { 
      $("style").prepend("@font-face {\n" + 
      "\tfont-family: \""+fontValue+"\";\n" + 
      "\tsrc: local('☺'), url("font-file-url") format('opentype');\n" + 
      "}"); 
     } 
     });

問題

我不知道什麼時候該字體是由瀏覽器中呈現，所以我最終顯示FOUT

來源

2017-01-25 Abhinav

可能有點晚，但我做到了使用谷歌的WebfontLoader Library。它爲我做了這份工作。

我這是怎麼實現的：

第1步： 包含庫的JS文件

步驟2：下面的代碼的伎倆，我

WebFont.load({ 
google: { 
    families: ['Droid Sans'] 
}, 
timeout:5000, 
fontactive: function(familyName,fvd){ //This is called once font has been rendered in browser 
    // Your business logic goes here 

    }, 
});

您也可以加載除谷歌字體以外的自定義字體。庫還提供各種回調函數和其他很酷的東西。你可以查看上面的鏈接。

來源

2017-06-29 10:49:51 Abhinav

不幸的是，加載字體不被JavaScript支持100％。但有一個關於這個工作，支持它在未來：

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://drafts.csswg.org/css-font-loading/

來源

2017-02-08 01:39:25

動態加載字體

回答

相關問題