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

Weird issue with styles and element measurement (scrollWidth / scrollWidth) in Gatsby(Gatsby中样式和元素测量(scllWidth/scllWidth)的奇怪问题)

本文介绍了Gatsby中样式和元素测量(scllWidth/scllWidth)的奇怪问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

在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'); }

希望它能帮助某人。

这篇关于Gatsby中样式和元素测量(scllWidth/scllWidth)的奇怪问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Gatsby中样式和元素测量(scllWidth/scllWidth)的奇怪问题

基础教程推荐