1

我正在使用 [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/

4

3 回答 3

2

首先，从网络获取要集成的字体的 .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"
        }
    },

}

于 2021-10-19T06:26:11.477 回答
1

您应该可以像这样将它用于您的 Global 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;
于 2021-10-11T17:04:32.750 回答
1

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

将这些文件放入一个文件夹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 -功能/自定义应用程序）

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

于 2021-10-05T17:31:13.050 回答