如何使用Blob中存储的Webfont数据

Question

我的网站允许上传自定义字体并更改文本的属性，并且它是通过新手友好的界面提供的CSS：仅允许使用Webfont类型（woff / woff2 / eot ...）。上面的css有一个@ font-face规则，该规则必须链接到上载的文件，因为我想用用户字体写文本，但是我不知道该怎么做：我尝试使用Blob的url，但是什么也没发生，您有什么建议吗？

[PS：我没有服务器/ PHP，只有纯JavaScript，因为我被要求临时上传]

Answer 1

1）获取woff文件

2）将其读取为dataUrl并存储

 var reader = new FileReader();
    reader.readAsDataURL(woffFile);
    reader.onloadend = function () {
        woffData = reader.result;

3）在html中添加样式

     var newStyle = document.createElement('style');
    newStyle.appendChild(document.createTextNode("\
@font-face {\

        font-family: " + fontName + ";\
        src: url('" + woffData+ "');\
    }\
    "));
        document.head.appendChild(newStyle);