Javascript：从 blob 数据创建字体答案

【问题标题】：Javascript: create font from blob dataJavascript：从 blob 数据创建字体
【发布时间】：2016-01-21 11:45:06
【问题描述】：

我正在尝试创建一个仅基于 XMLHttpRequest 的资产加载器。我在 XMLHttpRequest 的帮助下加载图像，让它响应“blob”类型并将其转换为普通的 html 元素。像这样的：

var request = new XMLHttpRequest();
var image;
var blob;
request.onreadystatechange= function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            blob = request.response;
            image = new Image();
            image.src = window.URL.createObjectURL(blob);
        }
    }
};
request.responseType = 'blob';
request.open("GET", "resource_url", true);
request.send();

我想实现相同的概念来加载字体并在加载后在页面上注册它们。一般情况下可能吗？收到 Blob 响应后该怎么办？

【问题讨论】：

标签： javascript fonts blob loading assets

【解决方案1】：

对于初学者，您需要为此切换到 CSS，因为这是当前将字体加载到页面中的唯一方法（Font Loading API 正在开发中，但目前支持几乎为零）。

在 CSS 中，自定义字体声明如下所示：

@font-face {
    font-family: "Yo Font";
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA...) format("woff");
    font-weight: normal;
    font-style: normal;
}

font-face 声明的具体外观取决于您加载的字体类型。 font-face here 的 MDN CSS 规范中的更多信息。

这意味着您必须动态创建样式表，并使用它来加载字体。您有两种更新样式表的方法。

通过StyleSheet DOM API（最有效的方法）动态更新样式表的规则，你会得到你的StyleSheet对象styleElement.stylesheet
将您的font-face 声明附加到<style /> 元素的innerHTML。

【讨论】：

谢谢！这是否意味着我可以将通过 createObjectURL 方法转换的 blob 数据附加到 @font-face src 属性？
@StanislauHerasimovich 基本上是正确的。