从 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 无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

无法将非默认字体导入monogame

如何将新字体导入项目 - Angular 5

如何给Magento网站添加最潮的Google字体

将 Google 字体系列添加到 Nuxt&Vuetify 项目

将字体添加到自定义 Android TextView

ipad的字体