我正在用next.js.创建个人博客
目前，我使用谷歌字体为我的博客提供字体。除了加载时的初始内容转移外，一切都很好。
当我加载我的网页时，它会在加载新字体时发生变化(不是所有字体都有相同的间距、大小等(。所以我的问题是如何防止这种内容变化？
我看到了很多关于添加加载屏幕直到加载所有内容的建议，但我认为最好的解决方案是将所有内容捆绑到html本身。NextJs自动为我使用<style/>标记内联样式，next-images将使用base64内联小图像。那么，我如何自动内联我的字体(当我决定更改字体时，我不想总是更改大量的@font-face声明(？
目前我使用：
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
我希望NextJS自动将其转换为这样的东西：
@font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
您可以使用这个惊人的项目来获得任何带有base64内联src的谷歌字体。
嵌入式谷歌字体
只需将你的谷歌字体链接放在这里：https://amio.github.io/embedded-google-fonts/
例如对于Barlow字体：https://fonts.googleapis.com/css2?family=Barlow:wght@400；600；800&显示=交换
然后您可以复制结果并在项目中创建一个<your-font>.css文件。