我經(jīng)歷了一些奇怪的事情。在Windows上一切看起來都很好，但在Linux或Mac上，按鈕中的文本節(jié)點沒有垂直居中。

只對Chrome進行了測試

https://jsfiddle.net/xjya36hw/

@font-face {
  font-family: 'Arial MT';
  src: url('http://dyntest.dk/css/font/arial-mt-extra-bold.woff2') format('woff2');
  font-display: swap;
}

button,
.btn {
  appearance: none;
  transition: all .3s;
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

button,
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: #fff;
  border: 0;
  border-radius: 99px;
  font-family: Arial MT;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  user-select: none;
}

.btn {
  color: inherit;
  text-decoration: none;
}

.btn-cta {
  background: blue;
  color: #fff;
  border: 1px solid hsl(0, 0%, 0%, 5%);
}

<a class="btn btn-cta" href="#">Login</a>