首页 > 解决方案 > blob 无法识别字体文件类型

问题描述

我正在尝试从本地文件加载字体文件并将其转换为 uri。

不幸的是,我在正确读取文件时遇到了一些问题

这是我正在构建的功能:

 function fontToDataURI (file_path) {
    
    return fetch(file_path) 
      .then(resp => resp.blob()) 
      .then(blob => {
        console.log(blob.type)
        return new Promise(resolve => {

          let f = new FileReader();
          f.onload = e => resolve(f.result);
          f.readAsDataURL(blob);

        })
      })
      .then(dataURL => {
    
         let fontRule = `@font-face {
           font-family: "testfont face";
           src: url(${dataURL});
     
        }`

        return fontRule;
      })

不幸的是, resp.blob() 无法正确读取文件的 mimetype。

当我将字体文件传递给函数时,即 georgia.tff,我相信我应该看到一个 blob 类型的font/ttf. 相反,我看到了默认值application/octet-stream

我使用了类似的功能从网上提取了一个 .woff2 文件,它已经正确识别了该文件。

我有办法解决这个问题吗?谢谢!

标签: javascriptfontsblobfont-face

解决方案


推荐阅读