如何使用 base64 自动内联 google 字体

Question

我正在使用 next.js 创建个人博客。

目前我使用google字体为我的博客提供字体。除了加载时初始内容发生变化外，一切正常。

当我加载我的网站时，它会在加载新字体时移动（并非所有字体都具有相同的间距、大小等...）。所以我的问题是如何防止这种内容转移？

我看到很多建议在加载所有内容之前添加加载屏幕，但我认为最好的解决方案是将所有内容捆绑到 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;
}

Answer 1

您可以使用这个令人惊叹的项目来获取任何带有 base64 内联 src 的 google 字体。

embedded-google-fonts

只需将您的 google 字体 link 放在这里：https://amio.github.io/embedded-google-fonts/

例如，对于 Barlow 字体：https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;800&display=swap

然后您可以复制结果并在项目中创建一个<your-font>.css文件。

如何使用 base64 自动内联 google 字体

How to automatically inline google fonts using base64

html

css

fonts

next.js