Question

我在SSR上注入字体时遇到问题（Nextjs）从图像中可以看到，页面加载时没有特定字体（在我的情况下是Segoe，我将其存储在项目中的本地语言），浏览器将其替换为某些字体默认字体。感觉像文本在跳），所以我的问题是：是否可以使用所需的字体加载页面。这是我的代码

exapmle of font behaviour

字体文件style.ts：

export default `
    @font-face {
      font-display: swap;
      font-weight: normal;
      font-family: 'Segoe-UI';
      src: url('/fonts/Segoe UI/Segoe UI.ttf');
      font-style: normal;
    }
    ...
`;

文件_document：

import fonts from 'public/static/fonts/style.ts';
...

render() {
   <Head>
     ...
     <link rel="preload" href="fonts/Segoe UI/Segoe UI.ttf" as="font" crossOrigin=""/>
     ...
   </Head>
)
}

MyDocument.getInitialProps = async (ctx) => {
    const sheets = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    try {
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: App => props => sheets.collectStyles(
                <App {...props} />,
            ), 
        });
        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            styles: (
                <>
                    <style dangerouslySetInnerHTML={{ __html: fonts }}/>
                    {initialProps.styles}
                    {sheets.getStyleElement()}
                </>
            ),
        };
    } finally {
        sheets.seal();
    }
};

Nextjs字体SSR

0 个答案: