Question

我正在尝试仅基于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响应？

Answer 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
将innerHTML声明附加到<style />元素的{{1}}。

Javascript：从blob数据创建字体

1 个答案: