使用 JSZip 压缩字体文件（例如：ArialMT.ttf）无效

Question

压缩图像和 HTML 文件工作正常，但在为 CSS 添加字体文件时；字体文件大小为1kb，打不开

我尝试只压缩字体而不压缩任何其他文件，但仍然是同样的问题。

let zip = new JSZip()
let imageURLCount = 0
let fontFileCount = 0

let imageURLs = [
 'http:site.com/image1.jpg',
 'http:site.com/image2.jpg',
 'http:site.com/image3.jpg',
 'http:site.com/image4.jpg'
]

let fontFiles = [
 'http:site.com/fontFile1.ttf',
 'http:site.com/fontFile2.ttf',
 'http:site.com/fontFile3.ttf',
 'http:site.com/fontFile4.ttf'
]

// zip images
imageURLs.forEach((url, i) => {
  JSZipUtils.getBinaryContent(url, (error, data) => {
     if (error) {
        throw error
     }
     // zip file name
     imageFileName = 'image_'+i+'.jpg'

     // create images folder
     zip.folder('images')
        .file(imageFileName, data,{binary: true})

     imageURLCount++
     if (imageURLCount === imageURLs.length) {
        zipComplete(imageURLCount,fontFileCount)
     }
  })
}) // end imageURLs[] forEach 

// zip font files
fontFiles.forEach((fontFile, i) => {
  JSZipUtils.getBinaryContent(fontFile, (error, data) => {
     if (error) {
        throw error
     }

     // zip file name
     fileName = 'font_'+i+'.ttf'
     zip.file(fileName, data, {binary:true})
     fontFileCount++
     if (fontFileCount === fontFiles.length) {
        zipComplete(imageURLCount,fontFileCount)
     }
  })
}) // end fontFiles[] forEach 

// PS: zipComplete(imageURLCount,fontFileCount) checks if both arrays looped to the end and then trigger the 'file-saver' SaveAs()

我该如何压缩字体，或者是否无法使用 JSZip 压缩字体？

Answer 1

我希望编辑您的示例并在您的代码中发现问题，但事实证明没有任何问题。这是一个成功压缩 .ttf 文件然后下载 zip 的工作示例。

我猜问题出在从您的 .ttf URI 返回的内容上。

let zip = new JSZip()
let imageURLCount = 0
let fontFileCount = 0

let imageURLs = []

let fontFiles = [
  'https://fontlibrary.org/assets/fonts/symbola/cf81aeb303c13ce765877d31571dc5c7/7d8d51a2e1b57d59075325384458fac6/SymbolaRegular.ttf'
]

// zip font files
fontFiles.forEach((fontFile, i) => {
  JSZipUtils.getBinaryContent(fontFile, (error, data) => {
    if (error) {
      throw error
    }

    // zip file name
    fileName = 'font_' + i + '.ttf'
    zip.file(fileName, data, {
      binary: true
    })
    fontFileCount++
    if (fontFileCount === fontFiles.length) {
      zipComplete(imageURLCount, fontFileCount)
    }
  })
}) // end fontFiles[] forEach 
function zipComplete(imageURLCount, fontFileCount) {
  zip.generateAsync({
      type: "blob"
    })
    .then(function(content) {
      // see FileSaver.js
      saveAs(content, "example.zip");
    });
}
// PS: zipComplete(imageURLCount,fontFileCount) checks if both arrays looped to the end and then trigger the 'file-saver' SaveAs()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.js"></script>
<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>

使用 JSZip 压缩字体文件（例如：ArialMT.ttf）无效

Zipping font files (e.g: ArialMT.ttf) with JSZip is not working

javascript

jszip

vue.js