Javascript 网页刷新时会抖动

我的网站上有一个让我发疯的问题。当我刷新一个页面时，它会抖动。文本的行为类似于压缩，然后恢复正常。我不知道是什么引起的。我删除了90%的代码，但问题仍然存在。 如果能帮我解开这个谜，我将不胜感激。 代码如下

函数myFunction（）{
var x=document.getElementById（“topLinks”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
} 
否则{
x、 style.display=“block”；
}
}
函数openNav（）{
document.getElementById（“mySidebar”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidebar”）.style.width=“0”；
}

@导入url（'https://fonts.googleapis.com/css?family=Noto+衬线：400700&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Yanone+卡菲萨兹：wght@300；400；700&display=swap'）；
* {
框大小：边框框；
}
html{
滚动行为：平滑；
}
* {
保证金：0；
填充：0；
}
身体{
背景：url（img/background.png）已修复；
}
abbr先生{
光标：帮助；
}
/*内容部*/
.内容{
最大宽度：75%；
保证金：0自动；
边缘顶部：8px；
边缘底部：8px；
线高：1.6em；
字体系列：“非衬线”，衬线；
背景：rgba（78192253.7）；
溢出：隐藏；
填充：1em；
文本对齐：左对齐；
最小高度：100%；
字号：1.6em；
}
/**边栏**/
.侧边栏{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧边栏a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧边栏a：悬停{
颜色：#f1f1；
}
.侧边栏.关闭{
位置：绝对位置；
排名：0；
右：24px；
字体大小：32px；
左边距：50像素；
}
/*设置列表的样式*/
面包屑{
填充：12px 18px；
列表样式：无；
背景色：#0288d1；
边界半径：18px；
边缘顶部：12px；
字体系列：“非衬线”，衬线；
}
.openbtn:以前{
内容：网址("数据：image/svg+xml，%3Csvg class='bi-bi-list'width='1em'height='1em'viewBox='0 16'fill='white'xmlns='0http://www.w3.org/2000/svg“%3E%3path fill rule='evenodd'd='M2.5 11.5A.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5.5.5 0 01-.5-.5-.5z'剪裁rule='eve'nodd“/%3E%3C/svg%3E”）；
}
.openbtn{
填充：8px；
字体大小：24px；
光标：指针；
背景色：#111；
颜色：白色；
边界：无；
边界半径：18px；
字体系列：“非衬线”，衬线；
}
.openbtn:悬停{
背景色：#444；
}
/*并排显示列表项*/
面包屑李{
显示：内联；
字体大小：24px；
}
/*在每个列表项之前/之后添加斜杠符号（/）*/
面包屑李+李：之前{
填充：8px；
颜色：黑色；
内容：“/\00a0”；
}
/*为列表中的所有链接添加颜色*/
面包屑李a{
颜色：#fff；
文字装饰：下划线；
}
/*在鼠标上方添加颜色*/
面包屑李a：悬停{
文字装饰：无；
}
面包屑李a：聚焦{
背景色：#01314c；
文字装饰：无；
}
面包屑李a：有效{
颜色：#fff；
文字装饰：下划线；
}

标题在这里


菜单


面包屑

标题1
标题2
标题

一些东西



开放式：

此处文本

尝试预加载您的字体

---

阅读

我认为这与加载的样式有关。可能是由于字体系列中的加载-一旦加载并应用，就会出现一些细微的差异，这些差异会影响元素。@chazsolo感谢您的提示。预加载字体似乎有一些好处。但加载后页面仍然会有一点抖动。@AndriNic也许我们有不同之处租用浏览器。我使用Chrome，尝试在浏览器中进行测试，没有发现任何问题。谢谢你的回答。我尝试预加载字体，但没有帮助。然后我下载了字体并将其包含在单独的css中，然后将其添加到预加载中。这也没有消除问题。但是，字体现在在加载时不会收缩。至少有一些进展。有趣的是，当我有我的旧的固定侧菜单时，没有什么是令人不安的。