css - 无法将字体粗细与谷歌字体匹配并对样式组件做出反应

Question

我正在尝试以下样式。问题是实际结果字体粗细与模型相差无几。我怎样才能确保我得到正确的风格？

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`,
        ],
      }
    }
  ],

标签： cssreactjsstyled-componentsgoogle-fonts

Answer 1

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