为什么在我的 html head 标签中添加 google 字体 link 后我的网页会抖动？

Question

我用VS代码创建了一个网页。然后我从 google-font 中选择一种字体，然后 将其 link 嵌入到 [=36= 的 head 标签 中].然后 在 CSS 中添加了字体系列。它工作正常。当我在实时服务器扩展中测试网页时。 我注意到每当我在 CSS 中写一个字符时，页面 抖动很多 。当我停止编写代码时，摇晃就停止了。在摇动过程中，字体无缘无故地变大、变小、变暗 e.t.c，尽管我除了字体什么也没做。这背后的问题是什么？如何停止这种摇晃？

body{
font-family: 'Girassol', cursive;
font-size:25px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown Menu design</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Girassol&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="indexstyle.css" />
    <script src="try.js"></script>
  </head>
  <body>
    <p>
      The University was established as compensation for the annulment of the
      1905 Partition of Bengal. The partition had established East Bengal and
      Assam as a separate province, with Dhaka as its capital. However, the
      partition was abolished in 1911. In 1913, public opinion was solicited
      before the university scheme was given its final shape, and the Secretary
      of State approved it in December 1913.[1] The first vice-chancellor of the
      university was Philip Joseph Hartog, who had been academic registrar of
      the University of London for 17 years.[
    </p>
  </body>
</html>

Answer 1

这可能是因为当您键入 CSS 时，它会暂时无效，直到您完成正在键入的规则。由于您使用的是实时预览扩展程序，而 CSS 无效，因此不会应用规则，因此您会看到页面外观发生变化。

Answer 2

感谢您的回答。我只是用一种方法解决了我的问题。因为我正在使用 vs 代码。我设置了一个自动保存选项。自动保存延迟选项设置为 100 毫秒。当我将它转换为1000毫秒时，它在不晃动页面的情况下工作。

为什么在我的 html head 标签中添加 google 字体 link 后我的网页会抖动？

Why my webpage shakes after adding google font link in my html head tag?

html

css

webfonts