在 scss 中导入字体变体 - React答案

【问题标题】：Importing font variant in scss - React在 scss 中导入字体变体 - React
【发布时间】：2019-10-26 20:11:58
【问题描述】：

我是css 的新手，所以我有点困惑。这是我在index.scss 文件中所做的事情

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,800,800i,900i&display=swap');

body {
  font-family: 'Nunito Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我想做所有的段落Nunito Sans Bold Italic。如何在特定文件中执行此操作，例如 components/link.js

【问题讨论】：

标签： css reactjs sass google-fonts

【解决方案1】：

要使用 Nunito Sans 以粗体和斜体设置所有段落，您首先需要定位每个 p 元素，然后添加您需要的字体系列和字体样式。例如：

p {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-style: italic;
}

如果您只想在该特定组件中使用此 css，请创建一个单独的 scss 文件并将其仅导入该组件，例如：

@import './link-style.scss';

【讨论】：

【解决方案2】：

这可能有效

//index.scss

.paragraph {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-style: italic;
}

<!--Link js -->
<p className="paragraph">
paragraph text
</p>

【讨论】：