如何在带有 JSS 的 typescript react-app 中使用谷歌字体？答案

【问题标题】：How to use google fonts in a typescript react-app with JSS?如何在带有 JSS 的 typescript react-app 中使用谷歌字体？
【发布时间】：2020-05-18 01:28:52
【问题描述】：

如何添加 Google fonts 以便在我的 JSS 中使用它们？

const styles = ({palette, typography}: Theme) => 
  createStyles({
    time: {
      flexBasis: '10%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20)
    },
    guestname: {
      flexBasis: '20%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20),
    }
})

【问题讨论】：

查看Getting Started guide。

标签： css reactjs typescript jss

【解决方案1】：

访问 fonts.google.com，“选择您需要的字体”。完成后，单击@import 选项卡并仅复制@import 代码：

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

将其粘贴到您的 CSS 文件中，例如index.css 然后保存。

在您的 JSS 中，要使用导入的字体，请执行以下操作：

const styles = ({palette, typography}: Theme) => 
  createStyles({
    time: {
      flexBasis: '10%',
      flexShrink: 0,
      fontFamily: "'Montserrat', sans-serif", // <-- FONT IS USED HERE
      fontSize: typography.pxToRem(20)
    },
    guestname: {
      flexBasis: '20%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20),
    }
})

【讨论】：

【解决方案2】：

带有 JSS 的 Google 字体

添加你的 css 文件，即 app.css、style.css

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

请更改您要使用的字体的 URL，否则可以正常工作

并将其用作：

{
  font-family: 'Josefin Sans', cursive;
}

【讨论】：