使用 next.js 和样式 jsx 加载字体

Question

我最近开始将我的 create react app 应用程序转换为 next.js。我正在使用 vercel 的开源 next.js 网站作为构建我的指南。我声明了一个 font.ts 并使用了样式 jsx 文件并将其导入到 _app.js 但是当我使用该字体时，我从服务器获得了 404。

这是 font.ts 文件：

import css from 'styled-jsx/css'

export default css.global`

    /* latin */

    @font-face {

        font-family: bon;

        font-display: auto;

        src: url('../public/static/fonts/Bon.woff2') format('woff2');

    }

    @font-face {

        font-family: bonitalic;

        font-display: auto;

        src: url('../public/static/fonts/Bonitalic.woff2') format('woff2');

    }

    @font-face {

        font-family: maison;

        font-display: auto;

        src: url('../public/static/fonts/MaisonNeue-Book.woff2') format('woff2');

    }

`;

Answer 1

您需要在此处使用的字体文件的位置是它们的公共 URL，而不是它们的文件系统位置。所以不要url('../public/static/fonts/...')只使用url('/static/fonts/...').