如何使用 base64 自动内联谷歌字体

Posted

技术标签:

【中文标题】如何使用 base64 自动内联谷歌字体【英文标题】:How to automatically inline google fonts using base64 【发布时间】:2021-03-07 10:22:31 【问题描述】:

我正在使用 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;

【问题讨论】:

【参考方案1】:

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

embedded-google-fonts

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

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

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

【讨论】:

以上是关于如何使用 base64 自动内联谷歌字体的主要内容,如果未能解决你的问题,请参考以下文章

您可以将内联 base64 编码图像添加到 Mandrill 模板吗?

为网站使用内联/base64 图像比仅链接到硬文件快多少?

如何在微信小程序中使用字体图标

Wordpress 标签云:如何删除字体大小的内联样式?

如何设置摩纳哥编辑器内联字体大小?

谷歌邮箱无法显示使用 Base64 处理的图片的解决方法