字体在 MacOS 上垂直居中，但在 Windows 上不是

Question

我正在使用我这样导入的自定义字体：

@font-face {
    font-family: 'Circular Std';
    src: url('CircularStd-Bold.woff2') format('woff2'),
        url('CircularStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

我正在 MacOS 上开发 - 并且在此操作系统上的每个浏览器中，字体都能完美显示。 不知何故，在 Windows 上，即使使用最新版本的 Chrome 和所有其他浏览器，字体也不是垂直居中，而是与顶部对齐。

为何如此？

Answer 1

和：

font-display: swap;

它为字体提供了极小的块周期和无限的交换周期。

要回答您的问题，请尝试使用：

font-display: auto;

原因：您要使用auto而不是swap的原因是因为

1. 这是非常好的做法
2. 字体显示策略由用户代理定义，使用 auto 时

因此，无论您使用的是 Windows 还是 Mac，它都会自动更改为您的偏好

希望为您解决问题！