Javascript: 从 blob 数据创建字体

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 responce收到后怎么办？

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（最有效的方法）动态更新样式表的规则，您将获得带有 styleElement.stylesheet

StyleSheet

将您的 font-face 声明附加到 <style /> 元素的 innerHTML。

Javascript: 从 blob 数据创建字体

Javascript: create font from blob data

javascript

fonts

assets

blob

loading