时间戳

首页 > 解决方案 > 如何使用存储在 Blob 中的 webfont 数据

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

问题描述

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

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

标签： javascriptcsswebblobfont-face

解决方案

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);

推荐阅读