Gatsby 中样式和元素测量（scrollWidth / scrollWidth）的奇怪问题

Question

我正在构建用于行拆分的组件，该组件接受一个字符串并返回分成不会溢出其父组件的行的文本。

在 stackoverflow 上好心人的帮助下，我设法构建了这个示例，它在沙盒或纯 react 应用程序（也可以使用自定义字体）中运行良好。但是，当我在 Gatsby 项目中使用相同的组件时，文本会溢出其父容器。

带有代码示例的 CodeSandBox： https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js

我尝试删除导致使用默认字体的全局样式，然后测量是准确的。然而，我的目标是使用自定义字体并且不会像纯反应示例中那样溢出。

我尝试过的：

• 我已尝试使用 gatsbyBrower.js 中的样式组件中的 createGlobalStyle 应用样式
• 我曾尝试在 gatsbyBrowser.js 中直接在组件中应用纯 css 样式
• 我尝试过添加内联样式，并直接在组件本身中定义字体

需要注意的奇怪事情 - 在某些浏览器上，组件只有在几次刷新后才能准确测量。

我已经为这个问题寻找了几个小时的解决方案，但我不知道如何解决这个问题，因此我们将不胜感激。

Answer 1

这个问题是由通过 CSS 中的 Font-Face 声明加载的字体引起的。事实证明，为了获得准确的测量值，需要预加载字体。我曾尝试将字体预加载添加到页面标题（通过 Gatsby Helmet 插件），如下所示：

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

这在理论上应该可行，但它没有，所以我尝试使用“gatsby-plugin-preload-fonts”并且它成功了。

插件页面： https://www.gatsbyjs.com/plugins/gatsby-plugin-preload-fonts/

解释如何使用它的附加视频： https://www.youtube.com/watch?v=i2oquvFdzbg

补充说明：

• 我仍然像往常一样在我的 CSS 文件中使用 font-face 声明，例如：

  @font-face { font-family: "Roxborough CF"; src: url("font.ttf") format('truetype'); }

希望它对某人有所帮助。