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

压缩文件的动态字体？

1 个答案: