Javascript 使用next.js和style jsx加载字体

我最近开始将我的createreact应用程序转换为next.js。我正在使用vercel的开源next.js网站作为构建我的网站的指南。我声明了一个font.ts并使用了StyleJSX文件并将其导入到_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');
    }
`;

---

这里需要使用的字体文件的位置是它们的公共URL，而不是它们的文件系统位置。因此，不要使用

url（'../public/static/font/..'）

，只需使用

url（'/static/font/..'）