css - react-pdf 中的样式显示异常行为

Question

我正在尝试在 react-pdf 中使用斜体样式。

在我使用font-style: italic;.

react-pdf 中是否有另一种将文本样式设置为斜体的方式？

const Italic = styled.Text`
  font-size: 12px;
  lineheight: 20px;
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: 0.5px;
  font-style: italic;//problem is with this line
  font-weight:400;
`;

它给了我错误：

未捕获（承诺）错误：无法解析未定义的字体，fontWeight 400

Answer 1

当您注册您的字体时，您需要确保为每个fontStyle您希望使用的字体添加一个变体。例如：

Font.register({
  family: 'Roboto',
  fonts: [
    { src: '<path-to-normal-font-variant>' },
    { src: '<path-to-italic-font-variant>', fontStyle: 'italic' },
    ...
  ]
});

Answer 2

const Italic = styled.Text`
  font-size: "12px";
  lineheight: "20px";
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: "0.5px";
  font-style: "italic";//problem is with this line
  font-weight:400;
`;

无论您在哪里添加 px 后缀，都需要使用单引号或双引号，并且 font-style: value(italic) 也需要使用双引号。