javascript - 来自压缩文件的动态字体？

Question

经过几个小时的尝试，我开始认为它可能比它值得做的更多工作，但这里是:

我的用户正在上传包含 .woff 文件的压缩文件。在页面加载时，我需要遍历这些压缩记录中的每一个，并将它们的 .woff 文件用作动态 @font-face 的 src。

所以，最终目标应该是这样的:

<style type="text/css">

    {% for font in fonts %}

        @font-face {
            font-family: "{{ font.name }}";
            src: url({{ font.woff_file }});
        }

   {% endfor %}

</style>

我开始弄乱 zip.js，但运气不太好，文档也非常有限。我怎么能做这样的事情？这些努力值得吗，还是我应该强制我的用户在压缩文件之外上传一个 .woff(我已经这样做了，当然效果很好)

Answer 1

您的帖子听起来很有趣，因为它加入了很多新功能，所以我决定尝试一下，但是下次尝试提供更多信息以及您目前工作的 jsfiddle 或 codepen ;)。

伟大的技巧是使用数据 URI，这样我们就可以存储我们从文件中解压缩的字体文件，并在@font-face 规则中使用它们。

一旦我们得到字体文件的条目，我们就得到它的数据:

fontEntry.getData(new zip.Data64URIWriter(fontMimeType), function(data){ appendFontFace(data, fontType); });

并用它来附加@font-face 规则:

function appendFontFace(dataUrl, fontType){
    var fontFace = document.createTextNode("\
@font-face {\
    font-family: 'font-name';\
    src: url('" + dataUrl + "') format("+fontType+");\
}\
");

  //remove the previous font-face if any
  if(style.childNodes.length > 0)
    style.removeChild(style.childNodes[0]);

  style.appendChild(fontFace);
}

您可以检查它是否正常工作: http://codepen.io/luizgrs/pen/zAxly