如何在next JS的主题UI中使用Local字体？
我正在构建一个使用主题-UI的下一个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",
}
},
}在这里，我在fonts对象中使用fonts name，并将其调用到根元素中。1：https://theme-ui.com/
回答 3
Stack Overflow用户
发布于 2021-10-19 06:26:11
首先，从网络上获取你想要集成的字体的.woff和.woff2文件。
将这些文件放入如下所示的文件夹
next-应用程序/公共/字体/menlo.woff2
注意：“它必须在公用文件夹中”
- 下一个js应用程序中公共文件夹中的任何内容都将被静态提供-如果您手动托管web服务器，请确保将这些文件也复制到您的web服务器上。
之后，你需要安装"@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"
}
},
}
Stack Overflow用户
发布于 2021-10-05 17:31:13
从web获取要集成的字体的.woff和.woff2文件(例如https://www.cufonfonts.com/font/menlo)
将这些文件放到一个类似my-next-app/public/fonts/menlo.woff2的文件夹中--下一个js应用程序中public文件夹中的任何内容都将被静态提供--只要确保将这些文件也复制到你的too服务器上，如果你是手动托管它的话。
然后，您需要以某种方式集成字体-使用基本的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");;
}我不知道主题-ui，所以我不能说这些@font-face定义应该集成在哪里。我们在一个全局样式.css中完成它，我们只是将它与一个定制的pages/_app.tsx文件(https://nextjs.org/docs/advanced-features/custom-app)集成在一起。
现在，您应该可以在应用程序中的任何位置使用该字体，也可以在您已经编写的主题ui中使用该字体。
Stack Overflow用户
发布于 2021-10-11 17:04:33
你应该能够像这样访问你的全局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;https://stackoverflow.com/questions/69454719
复制相似问题
腾讯云开发者
