在scss中导入字体变体-React

时间:2019-10-26 08:55:05

标签: css reactjs sass google-fonts

我是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

3 个答案:

答案 0 :(得分:0)

查看您的HTML标记。 为了设置某些特定元素的样式,请尝试向其添加css类。 比起使用该类,您可以在scss文件中应用特定字体。 让我知道您是否需要更多支持

答案 1 :(得分:0)

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

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

如果仅在特定组件中需要此CSS,请创建一个单独的scss文件并将其仅导入到该组件中,例如:

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

答案 2 :(得分:0)

这可能有效

//index.scss

.paragraph {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-style: italic;
}
<!--Link js -->
<p className="paragraph">
paragraph text
</p>