HTML5 FileReader.readAsDataURL 的输出可以用来引用字体吗?
Can the ouput of a HTML5 FileReader.readAsDataURL be used to reference fonts?
我有一个 HTML5 图片编辑器,我想启用用户上传的自定义字体。
我想使用 HTML5 FileReader.readAsDataURL 将用户提供的字体存储在数据库中。将其存储在数据库中后,我希望能够在页面上引用这些字体,以便可以使用它们。
因此,如果我获取文件 reader 的输出,我会得到 'data:application/octet-stream;base64,AAEAAAANA..."。可以然后我获取该数据并在页面上引用它以启用字体?
简答:是。
更长的答案:是的,但您想使用真正的 mime 类型重新提供它,而不是 "octet stream" mime 类型。它可能仍然有效,但浏览器会抱怨资源有错误的 mime 类型,如果您为其提供服务的站点使用 CSP(我希望您正在使用它?)那么这实际上可能会阻止字体加载.您将需要 font/opentype
或 application/font-woff
等(取决于用户上传的内容,通过查看文件的前几个字节进行简单检查)。
我有一个 HTML5 图片编辑器,我想启用用户上传的自定义字体。
我想使用 HTML5 FileReader.readAsDataURL 将用户提供的字体存储在数据库中。将其存储在数据库中后,我希望能够在页面上引用这些字体,以便可以使用它们。
因此,如果我获取文件 reader 的输出,我会得到 'data:application/octet-stream;base64,AAEAAAANA..."。可以然后我获取该数据并在页面上引用它以启用字体?
简答:是。
更长的答案:是的,但您想使用真正的 mime 类型重新提供它,而不是 "octet stream" mime 类型。它可能仍然有效,但浏览器会抱怨资源有错误的 mime 类型,如果您为其提供服务的站点使用 CSP(我希望您正在使用它?)那么这实际上可能会阻止字体加载.您将需要 font/opentype
或 application/font-woff
等(取决于用户上传的内容,通过查看文件的前几个字节进行简单检查)。