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