在 pdfkit 中嵌入自定义字体

问题描述

我在这里查看了一些关于 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',220)
              doc.list(['Стартовая Страница'],50,50)
              doc.list(['TestList'],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 中注册的字体时，它似乎显示了其他字体的显示方式

我应该尝试将这种字体注册到文档中吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript pdf-generation pdfkit pdfkit wkhtmltopdf