我正在尝试设计一些锚标签的样式，使其看起来和我的按钮完全一样。它们都给出了一个公共类：

.xButton {
    border: none;
    padding: 0.5rem 1.5rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.2rem;
    font-size: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }

尽管如此，锚标记内的文本的垂直对齐方式是朝上的。In pic attached, the bottom one is the anchor tag, first one is button. This is the case even without icons btw
手动添加vertical-align: bottom或vertical-align: center似乎不起作用。有趣的是，当我在公共类上执行all: unset时，按钮的文本同样垂直对齐到顶部。

**编辑：**需要说明的是，即使没有图标，文本看起来也像this。即使添加了text-align: center规则也是如此。

更新！

For some reason, changing the font-family of the common class (.xButton) to Arial from the custom font Hind fixed the issue...我不知道为什么在使用自定义字体时会出现问题，我可以向哪里报告。

完整代码，供参考：该组件：

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & HTMLAttributes<"button">;
const { class: className, type = "button", ...attrs } = Astro.props as Props;
const isAnchor = "href" in Astro.props;
---

{
  !isAnchor ? (
    <button class:list={['xButton' , className]} type={type} {...attrs}>
      <slot />
    </button>
  ) : (
    <a class:list={['xButton' , className]} {...attrs}>
      <slot />
    </a>
  )
}

<style>

  .xButton {
    border: none;
    padding: 0.5rem 1.5rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.2em;
    font-size: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }

  .xButton > svg {
    height: 1.2em;
    width: auto;
  }

  .xButton.primary {
    color: var(--neutral-swatch-900);
    background-color: var(--primary-swatch-100);
  }

  .xButton.secondary {
    background-color: var(--primary-swatch-800);
    color: var(--primary-swatch-100);
  }

  :global(.dark) .xButton.primary {
    color: var(--neutral-swatch-100);
    background: var(--neutral-swatch-900);
  }

  :global(.dark) .xButton.secondary {
    background-color: var(--primary-swatch-100);
    color: var(--neutral-swatch-800);  
  }

  .xButton:hover {
    filter: brightness(1.3);
    transition: all 0.5s ease-in-out;
  }

</style>

它被称为：

<nav>
        <XButton class="primary">
          Launch Lab&nbsp; <FlaskIcon/>
        </XButton>

        <XButton href="https://github.com/xylarshayu" rel="noopener" target="_blank" class="secondary">
          Go to Github&nbsp; <GithubLogo/>
        </XButton>
      </nav>

(The Icons的工作方式仅仅是SVG，我使用https://github.com/antfu/unplugin-icons来实现。