Ale*_*lex 10 javascript webfonts reactjs web-performance next.js
我正在尝试使用 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 />
您不需要任何额外的依赖即可使用字体。只需将您的字体移至public/fonts而不是static/fonts.
然后预加载：
<link rel="preload" href="/fonts/Avenir.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
记得保留开头的斜杠，否则不起作用。根据官方文档：
public然后，您的代码可以从基本 URL ( ) 开始引用其中的文件/。
另外，在 JSX 中，它crossOrigin不是crossorigin，并且它期望的是string，而不是boolean。
在 CSS 中（向每个 src-url 添加开始斜杠）：
<link rel="preload" href="/fonts/Avenir.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
然后删除字体文件的自定义 webpack 配置。此方法的缺点是字体不会像 那样内联url-loader。但我相信无论如何内联所有字体都是相当低效的。（您已经设置了限制100000。几乎每个 woff/woff2 字体都会被内联。）
在 next 的较新版本中，我相信您可以使用importWOFF2 文件并在 CSS 中使用它，类似于Gatsby 的示例。但是，如果您不导入字体文件，而是将它们放置在您所解释的目录中，您可以按照 Alex 的建议，通过对静态目录中的字体路径进行硬编码来/static/fonts避免使用 WebPack 加载程序或next-fonts之类的插件：
import React, { Fragment } from "react";
const WebFonts = () => (
<Fragment>
<style global jsx>{`
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-stretch: normal;
font-weight: 400;
font-display: fallback;
src: local("SourceSansPro Regular"), local("SourceSansPro-Regular"),
url(/static/fonts/SourceSansPro-Regular.woff2) format("woff2");
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
U+A720-A7FF;
}
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 600;
font-display: fallback;
src: local("SourceSansPro SemiBold"), local("SourceSansPro-SemiBold"),
url(/static/fonts/SourceSansPro-SemiBold.woff2) format("woff2");
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
U+A720-A7FF;
}
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 700;
font-display: fallback;
src: local("SourceSansPro SemiBold"), local("SourceSansPro-SemiBold"),
url(/static/fonts/SourceSansPro-Bold.woff2) format("woff2");
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
U+A720-A7FF;
}
`}</style>
</Fragment>
);
export default WebFonts;
然后将该组件导入到_documentNextJS 中的覆盖中。这将使用添加到 NextJS 静态目录中的字体。请务必使用woff2woff2_compress提供的方法压缩从 Google Fonts 下载的任何 TTF 字体，然后再提供它们以获得更好的页面速度。如果您没有看到本地字体下载出现在 DevTools 的网络瀑布中，请确保通过删除这些字体或字体声明的任何本地版本进行测试。local
| 归档时间： |
|
| 查看次数： |
11180 次 |
| 最近记录： |