我需要將100種字體加載到我的網頁中才能查看

Question

將100多種字體加載到網頁以供查看的最佳方式是什麼？我有一家小型簽署公司，我需要在線用戶能夠以他們的選擇字體看到他們的自定義文本。大多數不會安裝這些字體。非常感謝。我知道@ font-face和local，但我正在尋找一種更快更短的方式。也許使用從選擇框值傳遞的變量？

Answer 1

不要一次加載它們。使用XmlHttpRequests按需加載字體。

如果你絕對必須加載的所有字體，然後Base64編碼，他們在一個CSS文件fonts.css接發球CSS文件gzip壓縮...

但嚴重的是，你不應該做後者。

Answer 2

在服務器上生成圖片。然後客戶端PC可以在您的頁面中生存或者可能不。

爲什麼不使用分頁並且一次只顯示10個？

Answer 3

這是一個部分解決方案，我沒有用字體進行測試。這個想法是有兩個頁面，說一個啓動頁面和真實頁面。在啓動頁面上，您可以通過在頁面上創建假IMG標籤來下載所有靜態圖像，字體等。然後這些文件在緩存中。當你遍歷你的文件，下載，暫停他們之間，以儘量減少阻止用戶界面的機會。這是我打算用於JavaScript文件的策略，但應該與其他靜態內容一起使用。

//Load but doesn't execute. Gets the file into the local cache. 
var preload; 
if (/*@cc_on!@*/false) 
{ 
    preload = function (file) 
    { 
     new Image().src = file; 
    }; 
} 
else 
{ 
    preload = function (file) 
    { 
     //it really is an object 
     var obj = document.createElement('object'), 
      body = document.body; 
     obj.width = 0; 
     obj.height = 0; 
     obj.data = file; 
     body.appendChild(obj); 
    }; 
} 

function preloadAll(urls) 
{ 
    processArray(urls, preload 
    //omit optional callback 
    ); 
} 

function processArray(items, process, callback) 
{ 
    var todo = items.concat(); //create a clone of the original 
    setTimeout(function() 
    { 
     process(todo.shift()); 
     if (todo.length > 0) 
     { 
      setTimeout(arguments.callee, 100); 
     } else 
     { 
      if (typeof callback === 'function') 
      { 
       callback(items); 
      } 
     } 
    }, 100); 
}