Javascript 借助隐藏元素加载字体

我正在做一个项目，我为用户提供各种免费使用的字体。 加载这些字体似乎很棘手。仅仅通过提供必要的@font-face声明来加载它们是不够的，因为字体自然不会被加载，除非网站上的元素实际使用这些字体中的一种

所以我开始在屏幕主体{overflow:hidden}上创建二十多个隐藏元素，每个元素使用一种自定义字体。这将强制所有浏览器实际呈现字体，从而正确加载字体

我的问题是，如果这种技术可以使用，我已经阅读了各种场景，何时使用，是否有更优雅的解决方案

到目前为止，我所尝试的：

通过jQuery的.ajax和.get函数获取字体文件。 使用香草XMLHttpRequest方法。 使用$window.load事件

---

非常感谢您的任何意见

您试图同时加载多少种字体？数量和总文件大小？您一次向用户推送了几个潜在的大型下载，这可能会很麻烦。另外，我不清楚如果用户在任何地方都看不到字体，为什么要下载字体。用户可以单击按钮创建一个元素，该元素使用由元素中的选择指定的字体。这里列出了所有可能的字体，可能有30-40种。使用尚未呈现的选定字体动态创建div，会导致以默认系统字体显示。这就是为什么我要提前渲染它们。@每个字体的文件数从4到24个不等。有些文件只有常规的重量，有些文件也以粗体显示，加上斜体版本。因此，4个文件的文件大小在100kb到300kb之间变化，24个字体文件的文件大小在500-1.200kb之间变化。但浏览器并不能加载所有内容。例如，Chrome仅将下载限制为.woff文件。因此，实际上，对于最大的字体文件批，到目前为止，每种字体的dl介于15kb和115kb之间。