如何使用NextJS使用自托管字体面板？
使用NextJS的字体
我读过关于如何在NextJS中使用自托管字体的不同主题。
当我这么做的时候，我得到了[ wait ] compiling ...：
@font-face {
font-family: 'montserrat';
src: url('./mypath/Montserrat-Medium.woff2') format('woff2'),
url('./mypath/Montserrat-Medium.woff') format('woff'),
url('./mypath/Montserrat-Medium.ttf') format('truetype'),
url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
}没有错误，或者只是编译.我读过( stackoverflow/57590195)，它说我们应该使用静态路径，比如
@font-face {
font-family: 'font';
src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
}但这一解决方案根本行不通。它似乎工作得很好，因为错误(或令人信服的等待)停止了。但是，如果您仔细观察，您的字体没有加载。
然后我尝试了fontface观察者，我很快就明白了问题是一样的。因为您必须使用font-face，而不能将它与NextJS一起使用。
下载下一个字体后，我已经阅读了文档并查看了github实例。
这是我的next.config.js灵感来自他们。
const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
const withFonts = require('next-fonts');
module.exports = withFonts(
withCSS(
withSass({
enableSvg: true,
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
})
)
);我的字体路径public/static/fonts。
下面是我试着使用它的方法。
...
function MainIndex() {
...
return (
<>
...
<style jsx>{`
@font-face {
font-family: 'Montserrat';
src: url('./static/fonts/Montserrat-Medium.ttf');
}
h1 {
font-family: 'Montserrat';
}
`}</style>
</>
)
}
...解决方案我找到了
- https://github.com/bramstein/fontfaceobserver✗456KB
- https://github.com/rohanray/next-fonts✗1.89MB
- ？
dangerouslySetInnerHTML可以工作，但我认为这不是最好的解决方案。(我没有试过) - ✗url(‘./静态/字体/font.woff2’)
编辑：
我创建了/public/static/fonts/fonts.css和/public/fonts/allMyfont.ttf，然后在_var.scss中导入sass变量@import“/public/静态/fonts/fonts.css”；导入style.scss my var $font并将" my /path/style.scss“导入到index.js (永久补充)
在我尝试了一种更接近的方法之后，/public/static/fonts/fonts.css仍然将我的字体放在同一个文件夹中。然后在我的index.js里。但那个人什么也没做。
这里是实时CodeSandBox中的代码
回答 4
Stack Overflow用户
发布于 2020-05-20 13:01:47
我通常是这样做的：
- 把字体放在公共/静态的地方。
- 与字体放在声明字体的CSS文件相同的文件夹中。
CSS文件示例/public/fonts/style.css
@font-face {
font-family: 'Italian No1';
src: url('ItalianNo1-Black.eot');
src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}更新NextJS的最新版本导入CSS文件的适当位置是_app.js (见文件)中的一个import语句。
较早的答案：
在_document.js (文档)中导入此css：
render() {
return (
<Html>
<Head>
<link href="/fonts/style.css" rel="stylesheet"/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}Stack Overflow用户
发布于 2022-01-30 23:51:56
贴士:这些天你不需要提供多个字体文件，因为可变字体是广泛支持，只使用一个文件。此外，较新的字体格式woff2有一个更好的压缩比，再次是广泛支持。
- 将字体文件放入
/public/fonts/文件夹 - 将其添加到
_document.tsx文件中，以便为所有页面获取：
export default class MyDocument extends Document {
render(): JSX.Element {
return (
<Html>
<Head>
<link
rel="preload"
href="/fonts/inter-var-latin.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
...- 在全球CSS文件中提到：
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url(/fonts/inter-var-latin.woff2) format("woff2");
}- 告诉浏览器缓存这个字体文件很长一段时间(~1年)，以避免不必要的再下载以后的网站访问。
向
next.config.json添加标头
module.exports = {
async headers() {
return [
{
source: "/fonts/inter-var-latin.woff2",
headers: [
{
key: "Cache-Control",
value: "public, max-age=31536000, immutable",
},
],
},
];
},
};参考资料：https://gourav.io/blog/nextjs-cheatsheet#add-custom-fonts
Stack Overflow用户
发布于 2021-03-07 22:51:12
我试过最新版本的next.js "next"："10.0.8"
将所有字体添加到“公共/字体”文件夹中，并在带有字体的globals.css中使用。
我认为您在字体面板中使用的路径可能不正确，但我不确定代码的结构。
@font-face {
font-family: 'Open Sans';
src: url('../public/fonts/OpenSans-Light.eot');
src: url('../public/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/OpenSans-Light.woff2') format('woff2'),
url('../public/fonts/OpenSans-Light.woff') format('woff'),
url('../public/fonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}之后，您可以使用它font-family: 'Open Sans'
下面是一个相关博客文章，如果您想阅读更多关于
https://stackoverflow.com/questions/61909298
复制相似问题
腾讯云开发者
