使用 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/...')。