Gatsby中样式和元素测量(scllWidth/scllWidth)的奇怪问题

2022-03-30 00:00:00 reactjs javascript css gatsby

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

在Stackoverflow上的好心人的帮助下，我成功地构建了这个例子，它在沙盒或纯反应应用程序(也可以使用定制字体)中运行得很好。但是，当我在Gatsby项目中使用完全相同的组件时，文本会溢出其父容器。

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

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

我尝试的内容：

  • 我尝试从gatsbyBrower.js中的样式组件应用具有createGlobalStyle的样式
  • 我尝试在gatsbyBrowser.js中和直接在组件中应用纯CSS样式
  • 我尝试添加内联样式，并直接在组件中定义字体

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

我已经为这个问题寻找了几个小时的解决方案，但我不知道如何解决这个问题，所以如果有任何帮助，我将不胜感激。

解决方案

该问题是由css中通过Font-Face声明加载的字体引起的。事实证明，为了获得准确的测量结果，需要预先加载字体。我曾尝试将字体预加载添加到页眉(通过Gatsby头盔插件)，如下所示：

<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声明，如NORMAL，例如：

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

希望它能帮助某人。

相关文章