反应-如何使用GlobalStyles的谷歌字体与情感

Question

我正在使用情感，正如我的css-in-js和我承认的那样，我对它相当陌生。我花了1+。一小时，找出如何注入全局样式，并添加谷歌字体，我的整个应用程序。

我试过：

• globalStyles和@impot(.)语句。不使用
• theme with emotion-theming和样式--不工作

链接，在my index.html和他们的身体中{字体-家庭: Roboto} -不工作

有人能给我举个例子吗？？我也想。在JS中学习CSS，但这越来越奇怪了。这么多时间，为了这么简单的事情。

Answer 1

我认为有两种方法可以做到：

emotion导出的

• 使用injectGlobal

import { injectGlobal } from 'emotion'

injectGlobal`
  @font-face {
    font-family: 'Patrick Hand SC';
    font-style: normal;
    font-weight: 400;
    src: local('Patrick Hand SC'),
      local('PatrickHandSC-Regular'),
      url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
        format('woff2');
    unicode-range: U+0100-024f, U+1-1eff,
      U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
      U+A720-A7FF;
  }
`

@emotion/core

• 使用Global

import { Global, css } from '@emotion/core'

function App() {
  return (
   <div>
    <Global styles={
      css`
        @font-face {
          font-family: 'Patrick Hand SC';
          font-style: normal;
          font-weight: 400;
          src: local('Patrick Hand SC'),
            local('PatrickHandSC-Regular'),
            url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
              format('woff2');
          unicode-range: U+0100-024f, U+1-1eff,
          U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
          U+A720-A7FF;
        }
       `
      }
    />
    // Others
   </div>
 )
}

Answer 2

以防万一。最简单的解决方案就是添加常规css :)