使用 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');
}
但该解决方案根本不起作用。它几乎似乎工作正常，因为错误(或令人信服的等待)停止了。
但是，如果您仔细观察，您的字体未加载。
然后我尝试了fontfaceobserver，我很快就明白问题会是一样的。因为您必须使用
font-face 而不能将其与 NextJS 一起使用。下载下一个字体后，我阅读了文档并查看了 the github exemples 。
这是我受他们启发的
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>
</>
)
}
...
我找到的解决方案
dangerouslySetInnerHTML 可以工作，但不是最好的我猜的解决方案。 (我没试过)
Read more one the github issue
编辑:
我试图适应什么 Jesper We did 。
我创建了
/public/static/fonts/fonts.css 和 /public/fonts/allMyfont.ttf 然后我导入 _var.scss 以将其与 sass 变量 @import "/public/static/fonts/fonts.css"; 一起使用导入 style.scss my var $font 并将“my/path/style.scss”导入我的 index.js(永远编译)在我尝试了一种更接近的方法后，我的字体仍然在
/public/static/fonts/fonts.css 相同的文件夹中。然后在我的 index.js 中。但是那个什么都不做。这里是现场CodeSandBox中的代码
最佳答案
这是我通常做的:
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;
}
import _app.js 中的声明 (See docs) .较旧的答案:
将此css导入
_document.js (docs):render() {
return (
<Html>
<Head>
<link href="/fonts/style.css" rel="stylesheet"/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
关于javascript - 如何使用 NextJS 使用自托管字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61909298/