相同的字体根据加载方式呈现不同

如何解决相同的字体根据加载方式呈现不同

我们正在使用 Lato font 开发应用程序。 UI 设计是在 figma 中完成的。

如果我们在本地加载字体（从谷歌下载 ttf 并将它们转换为 woff 和 woff2）使用字体

@font-face {
  font-family: 'Lato';
  src: url('~@/assets/fonts/lato-black-webfont.woff2') format('woff2'),url('~@/assets/fonts/lato-black-webfont.woff') format('woff');
  font-weight: $black;
  font-style: normal;
}

它会使它们与 figma（也加载在网络中）不同。

如果我们使用 import 直接从 google cdn 加载字体

@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);

它也会使它们与 figma 和本地负载不同。

所有 3 个应用程序（在本地加载字体的自定义应用程序、从 cdn、figma 加载字体的自定义应用程序）似乎以不同的方式呈现字体（特别是字体粗细）（所有 3 个应用程序具有相同的样式属性值：字体、字体系列、字体大小、字体粗细等）。

这种差异从何而来？