Javascript:从 blob 数据创建字体

Question

我正在尝试创建一个仅基于 XMLHttpRequest 的 Assets 加载器。我在 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 响应后我应该如何处理它？<​​/p>

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 到底怎么样？声明的外观取决于您加载的字体类型。更多信息请参阅 MDN CSS 规范 font-face here .

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

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