如何在 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

在我的情况下，我正常导入字体并且它可以工作。 You can download the google fonts here 。但是，您可能必须设置 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',
    },
  ],
});

简单易用，无需 webpack 配置。

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

1. 我必须滚动才能使用按 ALPHA 排序（按字母顺序排列）Google Api Fonts click Here to look for your fontimage example 进行 API 调用。
2. 我滚动创建image example
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',
    },
  ],
});