在 pdfkit 中嵌入自定义字体答案

【问题标题】：embedding a custom font in pdfkit在 pdfkit 中嵌入自定义字体
【发布时间】：2021-06-16 01:30:00
【问题描述】：

我在这里查看了一些关于 pdfkit 和嵌入字体的帖子，但大多数似乎都使用节点版本或 ruby / 看起来与我正在做的完全不同的东西。

除了字体按预期工作外，我什么都有。但是，当我启用自定义字体时，不会出现任何文本。我看到了列表的占位符和项目符号，但除此之外，什么都没有。

<html>
  <head>    
  <script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
  <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
  <script type="text/javascript">      
    
    //getting the arraybuffer of the font I need
    var xhr = new XMLHttpRequest;
    xhr.onload = function() {
        console.log("Font IS 1",xhr.response)
    };

    xhr.responseType = 'arraybuffer';
    xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);
    xhr.send();
      
    //wix method that starts when a UI element is called.  In this case a "download" button
    window.onmessage = (event) => {
        if (event.data) {
      
            // create a document and pipe to a blob
            var doc = new PDFDocument();
            var stream = doc.pipe(blobStream());



            doc.font(xhr.response)
            //The standard way of setting a font for embedded
            //doc.font('Helvetica')

              
              doc.fontSize(20)
              doc.text('Стартовая Страница',200,120)
              doc.text('Test',200,220)
              doc.list(['Стартовая Страница'],50,50)
              doc.list(['TestList'],50,400)

              // end and display the document in the iframe to the right
              doc.end();
            stream.on('finish', function() {
                const blob = stream.toBlob('application/pdf')
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = "ShoppingList";
                a.style.position = 'fixed';
                a.target = '_blank';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        });
      
    };


    </script>
  </head>
  
  <body>

  </body>
</html>

我尝试了几种不同的方法，但大多数帮助似乎都是建议使用 CSS，我不知道如何在此处使用。不幸的是，我无法将字体上传到我自己的文件系统以用作我正在构建它的站点，由于某种原因阻止了字体的上传。这就是我使用 google 字体的原因，因为我没有遇到 CORS 问题。

我直接链接到 woff2 文件，因为使用谷歌推荐的任何其他方法获取数组缓冲区似乎都不起作用。请注意，我将同时使用拉丁字符和西里尔字符，所以这可能是一个问题，因为它们是单独的字符集

这是我从中获取链接的地方 https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap

此外，当我尝试打开 pdf 文件时，我收到此错误无法提取嵌入字体“BZZZZZ+CormorantGaramond-Regular”。某些字符可能无法正确显示或打印

当我查看 pdf 中的注册字体时，它似乎显示了它对其他字体的显示方式

还有其他方法我应该尝试将此字体注册到文档中吗？

【问题讨论】：

标签： javascript html pdf-generation wkhtmltopdf pdfkit

【解决方案1】：

您似乎无法直接嵌入任何由谷歌字体提供的“woff2”文件。您必须在 github 存储库中找到可用的 otf 或 ttf 文件。

你可以在这里找到你需要的文件：https://github.com/CatharsisFonts/Cormorant/tree/master/1.%20TrueType%20Font%20Files

只需下载一个文件，然后复制并粘贴下载链接。所以：

xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);

应该是：

xhr.open('GET', 'https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/1.%20TrueType%20Font%20Files/Cormorant-Regular.ttf', true);

【讨论】：