从 Google 字体导入字体并将其添加到 CreateGlobalStyle 无法正常工作

Question

我正在从具有 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 组件中

Answer 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 改变权重。