如何在下一个 JS 的主题 UI 中使用本地字体？

Question

我正在使用 [theme-UI][1] 用下一个 JS 构建一个应用程序。 但是在我的项目中，我必须使用本地字体或自定义字体。 但我不知道我该怎么做。 这是我的主题

    const theme = { 
     fonts: {
        body: 'CircularBlack',
        heading: 'CircularBlack',
        monospace: 'Menlo, monospace',
      },

这是主题 -

export default {
    fonts: {
        body: "fufu", //text
        heading: "fufu", //boxShape
        monospace: "fufu", //header
    }
    styles: {
        root: {
            p: 0,
            m: 0,
            background: 'primary',
            cursor: 'default',
            position: 'relative',
            overflowX: "hidden",
            fontFamily: "body",
        }
    },
}

在这里，我在字体对象中使用字体名称，并将其调用到根元素中。 [1]： https : //theme-ui.com/

Answer 1

从网络上获取要集成的字体的.woff和.woff2文件（例如https://www.cufonfonts.com/font/menlo ）

将这些文件放入像my-next-app/public/fonts/menlo.woff2的文件夹中 - 下一个 js 应用程序中public文件夹中的任何内容都将被静态提供 - 如果您的托管，请确保将这些文件也复制到您的网络服务器上它手动。

之后，您需要以某种方式集成字体 - 使用基本的 CSS，例如：

  @font-face {
    font-family: Menlo;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/Menlo-Monospace.woff2")
      format("woff2"),
      url("/fonts/Menlo-Monospace.woff")
      format("woff");;
  }

我不知道 theme-ui 所以我不能说这些@font-face定义应该在哪里集成..我们在 global-styles.css 中完成它，我们只是与自定义pages/_app.tsx文件（ https： //nextjs.org/docs/advanced-features/custom-app )

现在您应该可以在应用程序的任何位置使用该字体，也可以在您已经编写的主题 ui 中使用。

Answer 2

你应该能够像这样在你的全局 css 中使用它：

import React from "react";
import { Global, css } from "@emotion/core";
import { ThemeProvider } from "theme-ui";
import theme from "../components/theme";

const App = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global
        styles={css`
          "*": {
            boxsizing: "border-box";
          }
          html,
          body {
            width: 100%;
            height: 100%;
          }
          figure {
            margin: 0;
          }
          @font-face {
            font-family: "Circular";
            src: url("/fonts/circular/circular-light.woff2") format("woff2");
            font-style: normal;
            font-weight: 300;
            font-display: swap;
          }
          @font-face {
            font-family: "Circular";
            src: url("/fonts/circular/circular-bold.woff2") format("woff2");
            font-style: normal;
            font-weight: 700;
            font-display: swap;
          }
          @font-face {
            font-family: "Circular Mono";
            src: url("/fonts/circular/circular-mono.woff2") format("woff2");
            font-style: normal;
            font-weight: 400;
            font-display: swap;
          }
          @font-face {
            font-family: "Cambon";
            src: url("/fonts/cambon/cambon-bold.woff2") format("woff2");
            font-style: normal;
            font-weight: 700;
            font-display: swap;
          }
        `}
      />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default App;

Answer 3

这很简单。 你必须在这个包中添加自定义字体。 这是例子-

import { Global, css } from "@emotion/core";
**import ThemeProvider and theme

const App = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global
        styles={css`
          @font-face {
            font-family: "Circular";
            src: url("/fonts/circular/circular-light.woff2") format("woff2");
            font-style: normal;
            font-weight: 300;
            font-display: swap;
          }
        `}
      />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default App;

Answer 4

首先，从网络获取要集成的字体的 .woff 和 .woff2 文件。

将这些文件放入一个文件夹中

下一个应用程序/公共/字体/menlo.woff2

注意：“它必须在公共文件夹中”

• 下一个 js 应用程序中公共文件夹中的任何内容都将静态提供 - 如果您手动托管，请确保将这些文件也复制到您的网络服务器上。

之后，您需要安装“@emotion/react”npm 包，然后以某种方式集成字体 - 使用基本的 CSS，例如：

_app.js：

 /** @jsxImportSource theme-ui */ import { Global, css } from "@emotion/react"; import { ThemeProvider } from 'theme-ui'; import theme from 'theme'; function MyApp({ Component, pageProps }) { return ( <ThemeProvider theme={theme} > <Global styles={css` @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYMEDIUM.woff') format("woff"); font-style: normal; font-weight: 300; } @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYREGULAR.woff') format('woff'); font-style: normal; font-weight: 400; } @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYBOLD.woff') format("woff"); font-style: normal; font-weight: 600; } `} /> <Component {...pageProps} /> </ThemeProvider> ) } export default MyApp

在主题部分插入这些，

 export default { fonts: { body: "SF Pro", heading: "SF Pro", monospace: "SF Pro" }, fontWeights: { body: 400, heading: 600, primary: 300 }, styles: { root: { p: 0, m: 0, bg: 'light', cursor: 'default', position: 'relative', overflowX: "hidden", fontFamily: 'body', minHeight: "100%", overflowX: "hidden" } }, }