Gatsby 中样式和元素测量 (scrollWidth / scrollWidth) 的奇怪问题
Weird issue with styles and element measurement (scrollWidth / scrollWidth) in Gatsby
我正在构建接受字符串和 returns 文本拆分行的组件，这些行不会溢出其父组件。
在 Whosebug 上好心人的帮助下，我成功地构建了这个示例，它在沙盒或纯 React 应用程序（也使用自定义字体）中运行得非常好。但是，当我在我的 Gatsby 项目中使用完全相同的组件时，文本会溢出其父容器。
带有代码示例的CodeSandBox：
https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js
我尝试删除导致使用默认字体的全局样式，然后测量是准确的。然而，我的目标是使用自定义字体并且不会像纯反应示例中那样溢出。
我试过的：
- 我已经尝试使用 createGlobalStyle 从 gatsbyBrower.js
中的样式化组件应用样式
- 我已经尝试在 gatsbyBrowser.js 中和直接在组件中应用纯 css 样式
- 我试过添加内联样式，并直接在组件本身中定义字体
需要注意的一件奇怪的事 - 在某些浏览器上，组件只有在刷新几次后才能准确测量。
几个小时以来，我一直在寻找这个问题的解决方案，但我不知道如何解决这个问题，因此，我们将不胜感激。
此问题是由 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-family: "Roxborough CF"; src: url("font.ttf") format('truetype'); }
希望对大家有所帮助。
我正在构建接受字符串和 returns 文本拆分行的组件，这些行不会溢出其父组件。
在 Whosebug 上好心人的帮助下，我成功地构建了这个示例，它在沙盒或纯 React 应用程序（也使用自定义字体）中运行得非常好。但是，当我在我的 Gatsby 项目中使用完全相同的组件时，文本会溢出其父容器。
带有代码示例的CodeSandBox： https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js
我尝试删除导致使用默认字体的全局样式，然后测量是准确的。然而，我的目标是使用自定义字体并且不会像纯反应示例中那样溢出。
我试过的：
- 我已经尝试使用 createGlobalStyle 从 gatsbyBrower.js 中的样式化组件应用样式
- 我已经尝试在 gatsbyBrowser.js 中和直接在组件中应用纯 css 样式
- 我试过添加内联样式，并直接在组件本身中定义字体
需要注意的一件奇怪的事 - 在某些浏览器上，组件只有在刷新几次后才能准确测量。
几个小时以来，我一直在寻找这个问题的解决方案，但我不知道如何解决这个问题，因此，我们将不胜感激。
此问题是由 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-family: "Roxborough CF"; src: url("font.ttf") format('truetype'); }
希望对大家有所帮助。