Javascript 我需要加载100种字体到我的网页查看

将100多种字体加载到网页以供查看的最佳方式是什么。我有一个小的标志公司，我需要在线用户能够看到他们选择的字体自定义文本。大多数人不会安装这些字体。非常感谢。我确实知道@font-face和local，但我一直在寻找一种更快、更短的方法。可能使用从选择框值传递的变量？

不要一次全部加载它们。使用XmlHttpRequests按需加载字体

如果您必须加载所有字体，那么base64将它们编码到CSS文件

font.CSS

中，然后将CSS文件gzip

---

但说真的，你不应该做后者。

在服务器上生成图片。然后客户端PC可能会在您的页面中存活。也许不是

---

为什么不使用分页，一次只显示10个呢？

这里有一个部分解决方案，我还没有测试过字体。想法是有两个页面，比如说启动页面和真实页面。在启动页面上，通过在页面上创建虚假的IMG标签，下载所有静态图像、字体等。然后这些文件在缓存中。在循环浏览文件时，要下载文件，请在文件之间暂停，以尽量减少阻塞UI的机会。这是我计划用于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);
}