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

Question

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

[PS: 我没有 server/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);

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

How to use webfont data stored in Blob

javascript

css

blob

font-face

web