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

Question

I'm importing Roboto from Google fonts with 4 different weights, however I don't know if I've done it properly because I'm missing font-weights.我正在从 Google fonts 导入具有 4 种不同权重的 Roboto，但是我不知道我是否做得正确，因为我缺少字体权重。

When trying to use:尝试使用时：

font-weight: 400;

or或者

font-weight: 500;

There is no visible difference.没有明显的区别。

This is how I'm importing my font:这就是我导入字体的方式：

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;
    }
`

implementation of Styled-component: Styled-component 的实现：

const ProductTitle = Styled.div`
    font-weight: 500;
    color: #737B81;
    line-height: 20px;
`

I'm making use of Styled-components' createGlobalStyle to pull this into my different React components我正在使用 Styled-components 的createGlobalStyle将其拉入我不同的 React 组件中

Answer 1

Try this way:试试这个方法：

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;
  }
`

So the different is first import then use that, if don't work import just font then change with css the weight.所以不同的是首先导入然后使用它，如果不工作只导入字体然后用 css 改变重量。

Answer 2

Instead of adding it in createGlobalStyle, add it in your root index.html head tag.不要将其添加到 createGlobalStyle 中，而是将其添加到您的根 index.html 头标签中。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    // added here <------
    <style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');</style>

    <title>React App</title>
</head>

and then declare the font-family in createGlobalStyle然后在 createGlobalStyle 中声明字体系列

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    body{
        font-family:'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }
`

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

问题描述

2 个解决方案

解决方案1
1 2020-07-29 11:24:31

解决方案2
1 2022-06-29 21:15:29

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

问题描述

2 个解决方案

解决方案1 1 2020-07-29 11:24:31

解决方案2 1 2022-06-29 21:15:29

解决方案1
1 2020-07-29 11:24:31

解决方案2
1 2022-06-29 21:15:29