javascript - 我需要将 100 种字体加载到我的网页中以供查看

Question

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

Answer 1

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

如果您绝对必须加载所有字体，则 base64 将它们编码到 CSS 文件中，fonts.css然后提供压缩后的 CSS 文件...

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

Answer 2

在服务器上生成图片。然后客户端 PC 可能会保留您的页面。或者可能不会。

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

Answer 3

这是一个部分解决方案，我没有用字体测试过。这个想法是有两个页面，比如说一个启动页面和真实页面。在启动页面上，您可以通过在页面上创建虚假的 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);
}