在react-print-pdf项目中正确使用Google字体的方法

react-print-pdf是一个用于生成PDF文档的React组件库。在使用过程中，开发者可能会遇到需要添加Google字体的问题。本文将详细介绍在react-print-pdf项目中正确使用Google字体的几种方法。

方法一：使用CSS导出功能

最新版本的react-print-pdf提供了一个CSS导出功能，可以方便地引入外部字体。使用方法如下：

import { CSS } from '@onedoc/react-print';

const fontCSS = CSS(`
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
`);

// 在组件中使用
<h1 style={{ fontFamily: 'Roboto' }}>标题文本</h1>

需要注意的是，这个功能是在较新版本中才添加的。如果遇到"'CSS' is not exported"错误，说明当前安装的版本可能过旧。可以通过以下命令更新到最新版本：

npm i -s @onedoc/react-print@latest

方法二：通过assets属性直接引入

另一种更通用的方法是通过渲染时的assets属性直接引入CSS文件：

const { file, info, error } = await onedoc.render({
  html: "<h1 style={{ fontFamily: 'Roboto' }}>Hello world!</h1>",
  assets: [
    {
      path: "fonts.css",
      content: `@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')`
    }
  ]
})

这种方法的好处是不依赖于特定版本的客户端SDK，且CSS样式表会自动附加到文档样式中。

字体使用最佳实践

1. 字体选择：选择适合打印的字体，如Roboto、Open Sans等无衬线字体通常在PDF中表现良好。

2. 字体权重：确保引入的字体包含所有需要的权重（如300、400、500、700等）。

3. 字符集：如果文档需要支持多语言，记得在Google字体URL中添加相应的字符集参数。

4. 性能考虑：只引入实际需要的字体变体，避免不必要的网络请求和文件体积增加。

通过以上方法，开发者可以灵活地在react-print-pdf项目中使用Google字体，创建出具有专业排版效果的PDF文档。