【问题标题】：Unable to match font weights with google fonts and react styled components无法将字体粗细与谷歌字体匹配并对样式组件做出反应
【发布时间】：2021-11-05 14:39:44
【问题描述】：

我正在尝试以下样式。问题是实际结果字体粗细与模型相差无几。如何确保获得正确的样式？

https://fonts.google.com/specimenTab?standard-styles#standard-styles

const LogoH1 = styled.span`
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -5px;
`

设计工具 (Adobe XD)

结果

我正在使用 Gatsby 连接字体：

  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `Montserrat`,
        ],
      }
    }
  ],

【问题讨论】：

告诉我你是如何连接字体的。这很可能是问题所在。
添加了 sn-p
我不认识盖茨比。但是官网说要指定字体的粗细。 gatsbyjs.com/plugins/gatsby-plugin-google-fonts
我也试过了，没用
喜欢这个？ '蒙特塞拉特\：900'

标签： css reactjs styled-components google-fonts

【解决方案1】：

plugins: [
{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Montserrat\:400,500,600,700,800,900`,
    ],
  }
}],

【讨论】：