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

Question

谁能告诉我如何在react.js中使用

@react-pdf/pdfkit

添加自定义字体吗？

我尝试使用

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. 我必须滚动才能进行按 ALPHA 排序（按字母顺序排列）的 API 调用 Google Api 字体单击此处查找您的字体 。
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',
    },
  ],
});

Answer 2

这对我有用！

Font.register({
  family: 'Roboto',
  fonts: [
    {
      src: '/fonts/Roboto-Regular.ttf',
      fontWeight: 400,
    },
    {
      src: '/fonts/Roboto-Bold.ttf',
      fontWeight: 700,
    }
  ]
})

const styles = StyleSheet.create({
  page: {
    fontFamily: 'Roboto',
  }
 })