动态字体面从压缩文件

Dynamic font faces from zipped file?

本文关键字：压缩 文件 体面 字体 动态      更新时间：2023-09-26

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

我的用户正在上传包含.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文件(我已经这样做了，当然它工作得很好)

你的帖子听起来很有趣，因为它加入了很多新功能，所以我决定尝试一下，但是下次试着提供更多的信息和一个jsfiddle或与你到目前为止的工作相互依存;

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

一旦我们得到了字体文件的条目我们就得到它data:

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

相关文章：