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

Question

我正在尝试使用我的自定义字体通过@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)

我尝试了各种寻址字体的方法，但没有任何效果。

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

Answer 1

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

import font from "./font.ttf"

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


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

这对我有用。