浏览器上的字体渲染问题

Question

我正在使用 Material UI 库构建一个 React 应用程序。 我需要将主题的默认字体从 Roboto 更改为 Overpass。为此，我使用他们的库导入了字体

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

然后我在 createMuiTheme 函数中定义了它：

  export const theme = createMuiTheme({
    typography: {
      fontFamily: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Overpass',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
      ... 
    }
  })

当我在浏览器上看到结果（在 Chrome、Brave、Firefox 上测试）时，所有文本都在底部呈现“填充”。我说“填充”是因为它不是实际的填充，就像文本定义不正确一样。我也尝试更改 line-height 属性，但这不是问题。

当您尝试在中心对齐元素时，这个问题很明显（inherit 是默认值，但它继承了 center 值）

上图是 Material UI 的默认 Button 组件，我这边没有做任何修改：如您所见，文字明显居高不下。

如果我使用其他字体（如 Benne）也会出现同样的问题

有人知道如何解决这个问题吗？

编辑：如果我使用 Poppins 作为字体，则不存在此问题

编辑 2：查看示例 https://codesandbox.io/s/unruffled-vaughan-zvwq9

在示例中，我放置了一个按钮以及一个居中对齐的组件。在这两种情况下，您都会看到上述错误

Answer 1

错误的原因是 Overpass 的问题。他们自 2019 年就意识到了这个问题，并在几个月后发布了修复程序（参见 issue#56）。

不知道为什么，他们没有重新构建最新版本，而只是在他们的存储库中发布了修复程序。到目前为止，修复它的唯一方法是直接从存储库中获取文件，而不是下载版本。

我个人认为 Google Fonts 直接从他们的构建（.zip 文件）而不是从实际存储库中获取字体，从而带来了问题。

已经有一个 request to publish an updated build，目前被开发团队忽略。