React pdf 如何添加自定义字体

在React项目中添加自定义字体到PDF，通常我们会使用一些库来帮助生成PDF文件，比如react-pdf。这里我将详细说明如何使用@react-pdf/renderer库在PDF文档中添加自定义字体。

步骤 1: 安装 @react-pdf/renderer

首先，确保你的React项目中已经安装了@react-pdf/renderer。如果还没有安装，可以使用npm或yarn来安装：

bash
npm install @react-pdf/renderer
# 或者
yarn add @react-pdf/renderer

步骤 2: 下载并引入你的自定义字体

你需要确保你有合法的权利使用这些字体。下载完字体文件后（通常是.ttf或.otf格式），将字体文件放置到你的项目中，比如放在src/fonts目录下。

步骤 3: 注册字体

在你的项目中，使用Font.register方法来注册字体。你可以在一个统一的配置文件中做这件事，比如src/pdfFontSetup.js：

javascript
import { Font } from '@react-pdf/renderer';

Font.register({
  family: 'OpenSans',
  src: require('./fonts/OpenSans-Regular.ttf'),
});

Font.register({
  family: 'OpenSans Bold',
  src: require('./fonts/OpenSans-Bold.ttf'),
});

步骤 4: 在PDF文档中使用自定义字体

在你的PDF组件文件中，确保引入了自定义字体的配置文件，然后在文档中使用font-family来指定字体：

javascript
import React from 'react';
import { Document, Page, Text, StyleSheet } from '@react-pdf/renderer';
import './pdfFontSetup'; // 引入字体配置

const styles = StyleSheet.create({
  body: {
    fontFamily: 'OpenSans', // 使用注册的字体
  },
  title: {
    fontFamily: 'OpenSans Bold', // 使用注册的粗体字
    fontSize: 24,
  }
});

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.body}>
      <Text style={styles.title}>这是使用自定义字体的标题</Text>
      <Text>这是正文部分，使用普通的OpenSans字体。</Text>
    </Page>
  </Document>
);

export default MyDocument;

注意点

• 确保自定义字体的版权问题，只使用允许在项目中使用的字体。
• 路径和字体文件名需要正确无误。
• 引入字体配置的路径需要正确。

通过以上步骤，你可以在React项目的PDF文件中使用自定义字体，从而使文档更符合个人或公司的品牌形象。