相关疑难解决方法(0)
使用 next.js 和样式组件重新加载时无样式文本 (FOUT) 的 Flash
我正在使用 next.js 样式组件的全局样式，每次我重新加载我的页面时，我都能看到字体闪烁。
我有我的字体文件 public/fonts/Inconsolata
我在频谱聊天中到处寻找，next.js github问题，但似乎找不到任何解决方案。
页面/index.js
import styled from 'styled-components';
const H1 = styled.h1`
font-family: 'Inconsolata Bold';
font-weight: 700;
color: #000;
`;
const index = () => {
return (
<div>
<H1>font flashes</H1>
</div>
);
};
export default index;
页面/_app.js
import App from 'next/app';
import React from 'react';
import GlobalStyle from '../src/style/globalStyle';
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<>
<GlobalStyle />
<Component {...pageProps} />
</>
); …reactjs server-side-rendering styled-components next.js vercel
12
推荐指数
推荐指数
2
解决办法
解决办法
3660
查看次数
查看次数
使用 NextJS 自托管字体
我正在尝试使用 NextJS 应用程序自行托管网络字体，但遇到了麻烦。这是浏览器尝试访问这些字体的 URL：
localhost:3000/_next/static/css/fonts/Avenir.woff2
实际路径是：
_project_dir/static/fonts/Avenir.woff2
我尝试将链接包含在 _app.js 中，它确实下载了字体，但文本仍然没有样式。
localhost:3000/_next/static/css/fonts/Avenir.woff2
这是我的_app.js：
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<link href="https://fonts.googleapis.com/css?family=Poppins:500,500i,600&display=swap" rel="stylesheet" />
<link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
<link rel="preload" as="font" href="/static/fonts/AvenirHeavy.woff2" type="font/woff2" crossorigin />
<Head>
<title>Project</title>
</Head>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Component pageContext={this.pageContext} {...pageProps} />
</PersistGate>
</Provider>
</Container>
);
}
}
我的main.css
_project_dir/static/fonts/Avenir.woff2
和我的next.config.js：
<link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
10
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数