目前在 GatsbyJS 中加载字体而不闪烁的最佳方法是什么？答案

【问题标题】：What is currently the best way to load fonts without flickering in GatsbyJS?目前在 GatsbyJS 中加载字体而不闪烁的最佳方法是什么？
【发布时间】：2022-06-11 05:01:18
【问题描述】：

SSR 对我来说并不是一个真正的选择，因此根包装器选项可能不在讨论范围内。网络字体闪烁，因此本指南已发布：

https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/

我试过typography.js，但仍然闪烁，所以本指南也出来了：

https://www.gatsbyjs.com/docs/using-typography-js/

我能想到的唯一剩下的就是本地字体，所以它与 webpack 捆绑在一起？

https://www.gatsbyjs.com/docs/how-to/styling/using-local-fonts/

但是我什至从哪里获得字体文件？

编辑：

这似乎是寻找各种字体文件时的最佳资源：

https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin

【问题讨论】：

普通@font-face CSS 规则，带有指定rel="preload" 属性的<link> 元素？并非所有事情都需要“在您选择的框架中”发生，基本的 html/css 事情仍然可以在基本的 html/css 中发生。
"在你选择的框架中，并不是所有的事情都需要发生""嗯，我只是说我可以使用常规的 css。我实际上也尝试过它并且它闪烁，但不是@font-face。会试试谢谢。
lol @font-face 仍然需要 woff 文件。如操作中所述，不知道从哪里获取它。仍在谷歌中寻找 woff 文件哈哈
在搜索机器人 woff 30 分钟后没有运气。但我确实意识到 Mike 正在谈论从 GatsbyJS 框架恢复到 html/css。这个问题是关于在 GatsbyJS 中特别闪烁的。常规的 html/css 甚至不会有这个问题，所以不确定是否征求意见。标记为不友好。搜索继续。
不，我的意思是“继续使用 gatsby，但使用普通 CSS 加载字体”。 Roboto 字体是开源的，您可以下载官方版本并将其转换为 woff2（不是较旧的 woff 版本 1），也可以使用 google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin 之类的工具下载该字体集并删除除 woff2 文件之外的所有内容跨度>

标签： css fonts gatsby

【解决方案1】：

在尝试了一些其他插件之后，答案是继续使用 option/url #3，但使用在此处通过 google 找到的 tts 文件：

https://fonts.google.com/specimen/Roboto

你想解压压缩包，并将内容移动到 src/fonts/Roboto

然后在 css 文件 (fonts.css) 中像这样定位它：

@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url(../fonts/Roboto/Roboto-Bold.ttf) format('truetype');
}

然后像这样通过 gatsby-browser.js 引入它：

import "./src/styles/fonts.css"

然后你可以在你选择的框架 GatsbyJS 中的任何地方使用它。您也可以使用任何您喜欢的库 - 它适用于全局样式的样式化组件。

const GlobalStyles = createGlobalStyle`

  
body, html {
    box-sizing: border-box;
    background: ${props => (props.theme === "white" ? "#15181c" : "white")};
    color: ${props => (props.theme === "white" ? "white" : "black")};
    margin: 0;
    font-family: Roboto, sans-serif;
    font-weight: bold;
    max-width: 100%;
    overflow-x: hidden;
    transition: all 0.50s linear;
    line-height: 1.3;
    letter-spacing: 0;
  
  }
`

在 Gatsby 5+ 中，这是目前你最好的选择，其余的会闪烁。

所有静态，不需要 SSR 或包装器。在私人浏览器中确认加载和刷新。

希望这会有所帮助，因为闪烁的 css/字体和东西在 Gatsby 中很常见：D

【讨论】：

Don't use ttf，使用Don't use TTF, download the font，然后使用Woff2源
第一个链接问题来自大约 6 年前。随着 IE 将在 5 天内停产，看起来它只会在很大程度上影响 Opera Mini 用户。所以对于我的用例来说，离开它实际上是可以的。读完之后，对我来说最大的问题是——你知道使用 webpack 时不同的字体文件是否会影响性能吗？可能值得在生产中进行测试，甚至提出一个关于使用基于 webpack 的框架的字体性能的新问题。字体应用程序的链接很棒，虽然正是我想要的。谢谢迈克。
我知道：我写了那个答案。 IE 在不到 2 个月的时间里永久停产，其他所有东西（包括 MS 自己的浏览器 Edge）都支持 WOFF2。当您可以使用 WOFF2 时在 Web 上使用 TTF 只会让您的用户变得更糟 =) 至于 webpack：永远不要将静态资源放入您的包中：您所做的只是阻止浏览器表单正确缓存，这与有用。只需使用普通的 HTML+CSS（带有<link> 预加载）加载你的字体，不管你的 JS 应该做什么。