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

【问题标题】：Styles in react-pdf showing abnormal behaviourreact-pdf 中的样式显示异常行为
【发布时间】：2020-03-16 11:45:38
【问题描述】：

我正在尝试在 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

【问题讨论】：

尝试将字体大小、行高和字母间距放在双引号（字体大小：“12px”）或单引号等中。虽然不需要后缀 px。 React 会自动为某些数字内联样式属性附加一个“px”后缀。如果要使用“px”以外的单位，请将值指定为具有所需单位的字符串。
什么都没发生@IVANPAUL
抱歉忘记了，要添加字体样式：“斜体”也应该用双引号或单引号。 stackoverflow.com/a/50556938/6033636更多参考这个答案

标签： css reactjs text-styling react-pdf

【解决方案1】：

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

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

【讨论】：

谢谢你，汤姆。这对我有用并节省了我的时间。

【解决方案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) 也需要使用双引号。

【讨论】：