如何在react-pdf/pdf中添加自定义字体

Question

谁能告诉我如何@react-pdf/pdfkit在react.js中添加自定义字体？

我尝试使用doc.registerFont(path, font_family) 但它显示一个错误，例如Unhandled Rejection (Error): fontkit.openSync unavailable for browser build

谁能帮我？我不想渲染pdf。相反，我尝试创建并下载它。所以我不能使用react-pdf/renderer. 这就是我使用react-pdf/pdfkit的原因

Answer 1

1. 就我而言，我正常导入字体并且它有效。 您可以在这里下载谷歌字体。但是，您可能必须设置 webpack 配置。

    import FontUbuntuRegular from './styles/pdfFonts/ubuntuRegular.ttf';
    import FontUbuntuItalic from '.7styles/pdfFonts/ubuntuItalic.ttf';
    import FontUbuntu700 from './styles/pdfFonts/ubuntu700.ttf';
    
    Font.register({
      family: 'Ubuntu',
      fonts: [
        {
          src: FontUbuntuRegular,
        },
        {
          src: FontUbuntuItalic,
          fontWeight: 'bold',
        },
        {
          src: FontUbuntu700,
          fontWeight: 'normal',
          fontStyle: 'italic',
        },
      ],
    });

2.（推荐）简单、简单，无需 webpack 配置。

我找到了另一种添加src的方法，那就是寻找Webfont。

1. 我必须滚动才能进行 API 调用，并按 ALPHA（按字母顺序排列）Google Api Fonts 单击此处查找您的字体 图像示例。
2. 我滚动并找到了 图像示例
3. 我手动将“S”添加到 HTTP 中。之前（“http://...”）=> 之后（“https://...”）。
4. 我很容易地添加到我的代码中，并且它运行得很好。

Font.register({
  family: 'Ubuntu',
  fonts: [
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
    },
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
      fontWeight: 'bold',
    },
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
      fontWeight: 'normal',
      fontStyle: 'italic',
    },
  ],
});