React-PDF使用PDFViewer或实例时样式失效问题求助

• 显式注册带对应字重的字体
  React-PDF在iframe（PDFViewer）或导出PDF的场景下，默认系统字体的字重变体经常无法正确加载。解决办法是手动注册包含目标字重的字体文件：

  import { Font, Document, Page, Text } from '@react-pdf/renderer';
  
  // 提前注册字体（确保字体文件路径正确）
  Font.register({
    family: 'CustomFont',
    fonts: [
      { src: '/fonts/your-font-regular.ttf' },
      { src: '/fonts/your-font-bold.ttf', fontWeight: 'bold' },
    ],
  });
  
  // 使用时指定 fontFamily 和 fontWeight
  const MyDocument = () => (
    <Document>
      <Page size="A4">
        <Text style={{ fontFamily: 'CustomFont', fontWeight: 'bold' }}>This is bold</Text>
      </Page>
    </Document>
  );
  

  这样能确保渲染器在任何场景下都能找到对应的加粗字体文件，而不是依赖系统字体的自动解析。

• 检查样式格式正确性
  确认fontWeight的取值是合法的字符串（'bold'）或数值（700），不要出现拼写错误（比如写成Bold或者bolded）。其他失效的CSS属性也同理，检查是否符合React-PDF的样式规范（比如不支持浏览器专属的CSS属性）。

• 排查usePDF组件传递问题
  使用usePDF时，确保传入的document组件是完整且未被错误封装的。比如不要在组件外层额外包裹可能干扰样式的容器，或者检查是否有父组件的样式覆盖了内部Text组件的样式。

• 升级React-PDF版本
  部分旧版本的React-PDF存在iframe和导出场景下的样式渲染bug，尝试升级到最新的稳定版本，可能就能解决这类兼容性问题。

内容的提问来源于stack exchange，提问作者setInterval