web全栈框架next.js 更快一步加载字体
开发中 引入字体加载总是有字体闪烁一会回复默认然后应用引入字体 想更早的将字体引入
可以对NEXTJS 默认的document下手
custom-document
默认的document
import { Html, Head, Main, NextScript } from 'next/document'export default function Document() {return (<Html><Head /><body><Main /><NextScript /></body></Html>)
}
加入字体导入
const resetStyles = `
html,body {height: 100%;font-family: "ruyi","Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;}@font-face {font-family: "ruyi";src: url(/font/metaVo.ttf) format("TrueType");
}
`;export default function Document() {return (<Html><Head><style dangerouslySetInnerHTML={{ __html: resetStyles }} /></Head><body><Main /><NextScript /></body></Html>)
}
这样 修改默认的文档结构 插入字体加载的样式 比起引入css文件要更快一步
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！