从 Google 字体导入字体并将其添加到 CreateGlobalStyle 无法正常工作
Posted
技术标签:
【中文标题】从 Google 字体导入字体并将其添加到 CreateGlobalStyle 无法正常工作【英文标题】:Importing fonts from Google fonts and adding it to CreateGlobalStyle not working properly 【发布时间】:2020-11-18 23:12:48 【问题描述】:我正在从具有 4 种不同粗细的 Google 字体导入 Roboto,但是我不知道我是否正确地完成了它,因为我缺少字体粗细。
尝试使用时:
font-weight: 400;
或
font-weight: 500;
没有明显的区别。
这就是我导入字体的方式:
import createGlobalStyle from 'styled-components'
export const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body
font-family:'Roboto', sans-serif;
margin: 0;
padding: 0;
`
Styled-component 的实现:
const ProductTitle = Styled.div`
font-weight: 500;
color: #737B81;
line-height: 20px;
`
我正在使用 Styled-components 的 createGlobalStyle
将其拉入我的不同 React 组件中
【问题讨论】:
【参考方案1】:试试这个方法:
import createGlobalStyle from "styled-components";
const GlobalStyles = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
body
font-family: 'Roboto', sans-serif;
`
所以不同的是首先导入然后使用它,如果不工作只导入字体然后用 css 改变权重。
【讨论】:
我现在尝试了这个但没有运气,我也刚刚更新了我的问题。感谢您的回复以上是关于从 Google 字体导入字体并将其添加到 CreateGlobalStyle 无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章