typescript React -如何使用GlobalStyles for Google Fonts with Emotion

qfe3c7zg 于 2023-03-31 发布在 TypeScript

关注(0)|答案(3)|浏览(144)

我使用情感，作为我的css-in-js，我承认，我是相当新的.我花了1+.小时，弄清楚如何注入全局样式，并添加一个谷歌字体，到我的整个应用程序.
我试过：

globalStyles和@impot（..）语句。
theme与emotion-theming和样式的身体-不工作
链接，在我的index.html和他们的身体{font-family：Roboto} -不工作

有人能给予我一个工作的例子，请？？我想。学习CSS在JS中，但这是越来越奇怪。这么多的时间，这么简单的东西。

typescript

来源：https://stackoverflow.com/questions/64633593/react-how-to-use-globalstyles-for-google-fonts-with-emotion

3条答案

按热度按时间

u0njafvf1#

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

使用从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>
 )
}

赞(0）回复(0）举报 2023-03-31

iq3niunx2#

这对我很有效。使用情感11

import { css, Global } from '@emotion/react';

function WithGoogleFont() {
  return (
     <Global
        styles={[
           css`
              @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap');
           `,
           {
              body: { fontFamily: 'Inter' },
           },
        ]}
     />
  );
}

你必须包括字体家族后，使其工作。

赞(0）回复(0）举报 2023-03-31

hyrbngr73#

以防万一.最简单的解决方案是只是添加它与常规的css：）

赞(0）回复(0）举报 2023-03-31