如何为@react-pdf/renderer 使用自定义字体答案

【问题标题】：How to use Custom font for @react-pdf/renderer如何为@react-pdf/renderer 使用自定义字体
【发布时间】：2021-12-22 19:16:53
【问题描述】：

我正在尝试使用我的自定义字体使用@react-pdf/renderer 创建一个 pdf 文件。

这是我的代码：

const styles = StyleSheet.create({
  page: {
    alignItems: "center",
  },
  text: {
    fontFamily: "Nunito",
  },
});

const MainPage = () => {
  Font.register({
    family: "Nunito",
    src: "./ttf/Nunito-Regular.ttf",
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <Text style={styles.text}>Reserve Number: </Text>
      </Page>
    </Document>
  );
};

我收到了这个错误：

index.js:1 Error: Unknown font format
    at Object.push../node_modules/@react-pdf/fontkit/lib/fontkit.browser.es.js.fontkit.create (fontkit.browser.es.js:49)
    at FontSource._callee2$ (font.js:73)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:294)
    at Generator.next (runtime.js:119)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

我尝试了所有解决字体的方法，但没有任何效果。

任何帮助或将不胜感激。谢谢。

【问题讨论】：

标签： reactjs react-pdf

【解决方案1】：

我也有这个问题。我能够通过将字体文件作为变量导入然后将其用作 src 值来解决它。

import font from "./font.ttf"

Font.register({
  family: "FamilyName",
  format: "truetype",
  src: font 
});


const styles = StyleSheet.create({
  page: {
    fontFamily: "FamilyName",
  },
 });

这对我有用。

【讨论】：