如何使用 NextJS 使用自托管字体face？

2024-05-23

使用 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');
}

没有错误，否则只是编译...我已经读过（堆栈溢出/57590195 https://stackoverflow.com/questions/57590195/nextjs-self-hosted-fonts-loading）这表示我们应该使用静态路径，例如

@font-face {
    font-family: 'font';
    src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
}

但该解决方案根本不起作用。它看起来几乎工作正常，因为错误（或引人注目的等待）停止了。但如果你仔细观察，你的字体还没有加载。

然后我尝试了 fontfaceobserver，我很快就明白问题是一样的。因为你必须使用font-face并且你不能将它与 NextJS 一起使用。

下载下一个字体后，我阅读了文档并查看了github 示例 https://github.com/rohanray/next-fonts-example.

这是我的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 https://github.com/bramstein/fontfaceobserver 456 KB
✗ https://github.com/rohanray/next-fonts https://github.com/rohanray/next-fonts1.89MB
? The dangerouslySetInnerHTML可以，但不是最好的我猜的解决方案。（我没试过）
✗ url('./static/fonts/font.woff2')

阅读更多 github 问题 https://github.com/zeit/next.js/issues/512

EDIT:

我尝试去适应什么杰斯珀我们 https://stackoverflow.com/users/2846463/jesper-we did https://stackoverflow.com/a/61913799/7942242.

我创造了/public/static/fonts/fonts.css and /public/fonts/allMyfont.ttf然后我导入 _var.scss 以将其与 sass 变量 @import "/public/static/fonts/fonts.css"; 一起使用import style.scss my var $font 并将“my/path/style.scss”导入到我的index.js（永远编译）

在我尝试了更接近的方法之后/public/static/fonts/fonts.css与我的字体在同一文件夹中。然后在我的index.js 中。但那个人什么也没做。

这是实时代码代码沙盒 https://codesandbox.io/s/github/Florian-crg/byflo

这就是我通常做的事情：

将字体放在公共/静态某处
在与字体相同的文件夹中放置声明字体的 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 文件的正确位置是import_app.js 中的语句（参见文档） https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet.

较旧的答案：

导入这个css_document.js (docs https://nextjs.org/docs/advanced-features/custom-document):

render() {
    return (
        <Html>
            <Head>
                <link href="/fonts/style.css" rel="stylesheet"/>
            </Head>

            <body>
                <Main/>
                <NextScript/>
            </body>
        </Html>
    )
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)