如何使用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中的代码
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>
)
}https://stackoverflow.com/questions/61909298
复制相似问题
腾讯云开发者
