如何使用存储在 Blob 中的 webfont 数据

【问题标题】：How to use webfont data stored in Blob如何使用存储在 Blob 中的 webfont 数据
【发布时间】：2019-01-09 08:20:12
【问题描述】：

我的网站允许通过对新手友好的界面上传自定义字体和更改文本及其 css 的属性：只允许使用 webfont 类型 (woff/woff2/eot...)。上面的 css 有一个 @font-face 规则，它必须链接到上传的文件，因为我希望用用户字体编写文本，但我不知道该怎么做：我尝试使用 Blob 的 url 但没有发生了这样的事，你有什么建议吗？

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

【问题讨论】：

标签： javascript css web blob font-face

【解决方案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);

【讨论】：