如何在react-pdf renderer中为样式类设置文本斜体？

问题核心 #

你导入了包含多种样式的Roboto字体，但仅通过fontFamily: "Roboto"和fontWeight: 'bold'无法实现斜体效果，必须显式添加fontStyle: "italic"才能生效。

原因分析 #

react-pdf renderer的字体匹配机制不会自动关联字体的字重与样式变体。即使你的Roboto字体文件包含粗体斜体版本，若未明确指定fontStyle属性，库会默认使用对应字重的常规样式（即粗体非斜体），而非自动匹配粗体斜体变体。

正确实践 #

1. 确保完整注册Roboto字体变体
   在导入字体时，需将所有需要的变体（包括粗体斜体）都注册到react-pdf中，示例代码如下：

   import { Font } from '@react-pdf/renderer';
   
   Font.register({
     family: 'Roboto',
     fonts: [
       { src: '/fonts/Roboto-Regular.ttf' },
       { src: '/fonts/Roboto-Bold.ttf', fontWeight: 'bold' },
       { src: '/fonts/Roboto-Italic.ttf', fontStyle: 'italic' },
       { src: '/fonts/Roboto-BoldItalic.ttf', fontWeight: 'bold', fontStyle: 'italic' },
     ],
   });
   

2. 在样式中显式声明字体样式
   像你第二种写法那样，同时指定fontWeight和fontStyle，确保react-pdf调用对应的字体变体：

   Inspection: {
     top: 15,
     left: 55,
     fontFamily: "Roboto",
     fontStyle: "italic",
     fontSize: 7,
     fontWeight: 'bold'
   } 
   

总结 #

react-pdf不会自动推断字体的样式变体，必须通过fontStyle属性明确指定斜体，结合正确注册的字体文件，才能实现预期的粗体斜体效果。

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