如何在带有 JSS 的打字稿反应应用程序中使用 google 字体？

Question

如何包含 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),
    }
})

Answer 1

继续fonts.google.com，"select the font(s)"你需要。完成后，单击 @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),
    }
})

Answer 2

Google 字体与 JSS

添加到您的 css 文件中，即 app.css、style.css

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

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

并将其用作：

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

如何在带有 JSS 的打字稿反应应用程序中使用 google 字体？

How to use google fonts in a typescript react-app with JSS?

css

typescript

reactjs

jss